7er Mega Div – Webers Testseite

Hello

Click here to add your own text Click here to

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

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

/* ===  color-section with these 3 columns (only - no other elements are in )  === */
/* ===  use a custom-class on that color-section - i used here  flex-1-1-2  === */


#top .avia-section.flex-1-1-2 .entry-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  justify-content: center;
  align-items: stretch;     /* ===  stretches the items (columns) to have equal height on each row   === */
}

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

#top .avia-section.flex-1-1-2 .entry-content-wrapper .flex_column {
  flex: 0 1 calc((100% - 40px) / 3);     /* ===  2 gaps and 3 items   === */
  width: unset !important;
  margin: 0 !important;
}

@media only screen and (max-width: 989px) {
  #top .avia-section.flex-1-1-2 .entry-content-wrapper .flex_column {
    flex: 0 1 calc((100% - 20px) / 2);   /* ===  1 gaps and 2 items  - not allowed to grow  === */
  }
}

@media only screen and (max-width: 767px) {
  #top .avia-section.flex-1-1-2 .entry-content-wrapper .flex_column {
    flex: 1 1 100%;  /* ===  full-width, items are allowed to grow   === */
  }
}

Note

Why should you remove the pseudo-containers before and after?
As direct child elements of the flex container, they are treated like a flex item. This means they have all the properties of a flex item.

Here is a more modern way to obtain the above – using variables and to have responsive behaviour.

/* ===  or with a more modern way to style the flex-box  === */

#top .flex-1-1-2 {
  --flex-gap: 20px;
  --flex-count: 3;
}

#top .avia-section.flex-1-1-2 .entry-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  gap: var(--flex-gap);
  justify-content: center;
  align-items: stretch;     /* ===  stretches the items (columns) to have equal height on each row   === */
}

#top .avia-section.flex-1-1-2 .entry-content-wrapper:before,
#top .avia-section.flex-1-1-2 .entry-content-wrapper:after {
  flex: 0 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute; /* Takes it out of the (document) flow */
}

#top .avia-section.flex-1-1-2 .entry-content-wrapper .flex_column {
  box-sizing: border-box !important; 
  /* flex: 0 0 calc((100% - 40px) / 3); */
  flex: 0 0 calc((100% - (var(--flex-count) - 1) * var(--flex-gap)) / var(--flex-count));
  width: unset !important;
  margin: 0 !important;
  padding: 30px; /* you can change here padding of the columns at once */
}


/* Media Queries: Nur die Variable überschreiben */
@media only screen and (max-width: 989px) {
  #top .flex-1-1-2 {
    --flex-count: 2;
  }
}

@media only screen and (max-width: 767px) {
  #top .flex-1-1-2 {
     --flex-count: 1;
  }
}

Webers Webdesign

Kontakt

Status: Geschlossen (Urlaub) - öffnet Mittwoch (27.05.) um 08:00 Uhr

Betriebsferien:

11.05. – 26.05.2026: Urlaub

Telefon

+ 49 228 9768293

Anrufen

E-Mail

info@guenterweber.com

E-Mail senden