Was ist Gent, comnient quae. Hari dollaud ioriatem rempore evendesti utatus?

Venisti blabore stibus dolupta tiuscium, solla cust imus di namusam aut quam inctam ex essit, temolor eptios cus vel invendis modit, sanis sequiatem res des nonsequodias esecus volupti onectum antibus acerspe rnatque nonsed que landempedit aut odi as es alitatquam, quas di ut et ameniatum nonsed unt ad molo bea etur aut pliqui coreremquam nam nosandam est as intis ate endi inus.

Ex exces ut a invelen ieniet prate culluptur? Os quiam ratemque venis nest, ut voluptatur? Eveles et disto et exeribus.

a flexbox layout solution

How to set up a column group with flexbox layout.

You can see here that with a little css via a user-defined class, the layout can be set the way you want it. The column widths can also be set individually (here for column 3 to 75%).

flex: 0 1 75%; means :
  flex-grow: 0 /* === growing not allowed === */
  flex-shrink: 1 /* === shrinking is allowed === */
  flex-basis: /* === values - absolute or relative or auto - here 75% === */

The basic idea is to use the group property of Enfold, i.e. to create 3 x 1/3 columns as shown on top of this page – and then to influence these via CSS. The preparation for this is to set the option in “Row Screen Options” : “individually select position…” in the first tab. You can manage the order there on tab „Advanced“: Responsive – but you can not decide there the individual width. So css can help to solve it.

/* give a custom class to the color-section : one-three-two  */
/* the first column in that row - set on "Row Screen Options" : individually select position   */

@media only screen and (min-width: 990px) {
  #top .avia-section.one-three-two .av-column-wrapper-individual {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }

  #top .avia-section.one-three-two .av-column-wrapper-individual .flex_column {
      flex: 0 1 48%;
      width: unset !important;
      margin: 0 0 30px;
      padding: 0 !important;
  }

  #top .avia-section.one-three-two .av-column-wrapper-individual .flex_column:nth-child(3) {
    flex: 0 1 75%;
    width: unset !important;
  }
}

/*** media query belongs to the switch point you set on first column ***/
/*** enfold do rule the way on responsive behaviour - if you like to have a different way we can set here more options. ***/

@media only screen and (max-width: 989px) {
  #top .avia-section.one-three-two .av-column-wrapper-individual .flex_column:nth-child(2) {
    order: 3
  }
  #top .avia-section.one-three-two .av-column-wrapper-individual .flex_column:nth-child(3) {
    order: 2;
  }
}
/* that is enfold setting - on responsive case - if you have choosen the individual positon  */



@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all .av-break-at-tablet-flexwrapper.av-column-wrapper-individual.av-mobile-columns-flex {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
}

/* === so if you like to preserve the width we can stay on flex-direction row ! and set a different width === */

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