Hello

Click here to add your own text

Hello

Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text

Hello

Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text

Hello

Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text

The color-section above got only the items that should be part of flex-box!

I gave to the color-section a custom-class:  flexed

.avia-section.flexed .entry-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.avia-section.flexed .entry-content-wrapper:before,
.avia-section.flexed .entry-content-wrapper:after {
  display: none;
}

.avia-section.flexed .entry-content-wrapper .flex_column {
  margin: 0 0 4% !important;
  width: unset;
  flex: 0 1 23%;  /*** here is the width definition and the option that the item can get smaller but not wider ***/
}

@media only screen and (max-width: 989px) {
  .avia-section.flexed .entry-content-wrapper .flex_column {
    flex: 0 1 48%;
  }
}

/****  if you like to preserve that 2/2 column look do not set those media-querries
@media only screen and (max-width: 767px) {
  .avia-section.flexed .entry-content-wrapper .flex_column {
    flex: 1 1 100%; 
  }
}
*****/

next section a different approach: Grid Layout
whereby it doesn’t really matter whether these are 1/5 columns or not.

Section got custom-class: grided. … just one moment

you see that you can do crazy things with it – changing positions and size of the cells.

Feld1

Click here to add your own text

Feld2

Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text

Feld3

Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text

Feld4

Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text

Feld5

Click here to add your own text

/*** naming the Grid Areas ***/
#top .avia-section.grided .entry-content-wrapper .flex_column:nth-of-type(1) { grid-area: feld1; }
#top .avia-section.grided .entry-content-wrapper .flex_column:nth-of-type(2) { grid-area: feld2; }
#top .avia-section.grided .entry-content-wrapper .flex_column:nth-of-type(3) { grid-area: feld3; }
#top .avia-section.grided .entry-content-wrapper .flex_column:nth-of-type(4) { grid-area: feld4; }
#top .avia-section.grided .entry-content-wrapper .flex_column:nth-of-type(5) { grid-area: feld5; }



#top .avia-section.grided .entry-content-wrapper {
  margin: 0;
  display: grid;
  gap: 20px 20px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr ;          
  grid-template-areas:
    "feld1 feld2 feld2 feld3 feld3"
    "feld4 feld4 feld5 feld3 feld3";
}

#top .avia-section.grided .entry-content-wrapper:before,
#top .avia-section.grided .entry-content-wrapper:after {
  display: none;
}


#top .avia-section.grided .entry-content-wrapper .flex_column {
  width:unset !important;
  margin:0px !important
}

@media only screen and (max-width: 989px) {
  #top .avia-section.grided .entry-content-wrapper {
    margin: 0;
    display: grid;
    gap: 20px 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
    grid-template-rows: auto;          
    grid-template-areas:
      "feld3 feld3 feld3 feld4 feld4"
      "feld1 feld2 feld2 feld2 feld5";
  }
}

@media only screen and (max-width: 767px) {
  #top .avia-section.grided .entry-content-wrapper {
    margin: 0;
    display: grid;
    gap: 20px 20px;
    grid-template-columns: 1fr 1fr 1fr ; 
    grid-template-rows: auto;          
    grid-template-areas:
      "feld1 feld2 feld2"
      "feld3 feld3 feld3"
      "feld4 feld4 feld5";
  }
  #top .avia-section.grided .entry-content-wrapper .flex_column {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
  }
}

Webers Webdesign

Kontakt

Adresse

Webers Webdesign
Ludwig-Schopp-Straße 27
53117 Bonn

Anfahrt
Anrufen
E-Mail senden
Google Maps Preview

Mit dem Laden der Karte akzeptieren Sie die Datenschutzerklärung von Google.
Mehr erfahren

Karte laden