3columns – Weber Webdesign

Flex Box Model with 1/3 Columns

one color-section with custom-class: custom-css – or what ever you like.

only your 3 columns in this color-section no other elements in it!

columns on individual height !

Column1

Ich bin der Geist, der stets verneint!
Und das mit Recht; denn alles, was entsteht,

Click me

Column2

Ist wert, daß es zugrunde geht;
Drum besser wär’s, daß nichts entstünde.

Column3

So ist denn alles, was ihr Sünde,
Zerstörung, kurz, das Böse nennt,
Mein eigentliches Element.

Click me

.custom-css .entry-content-wrapper:before,
.custom-css .entry-content-wrapper::after{
  display: none;
}

.custom-css .entry-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content:  space-evenly;
  align-items: stretch
}


.custom-css .entry-content-wrapper .flex_column {
  flex: 0 1 30%;
  margin:0;
  padding: 0;
  margin-bottom: 3%;
  width: unset !important
}

@media only screen and (min-width: 990px) {
  .custom-css .entry-content-wrapper .flex_column {
    flex: 0 1 30%;
  }
}


@media only screen and (min-width: 600px) and (max-width: 989px) {
  .custom-css .entry-content-wrapper .flex_column {
    flex: 0 1 47%;
  }
}

@media only screen and (max-width: 599px) {
  .custom-css .entry-content-wrapper .flex_column {
    flex: 0 1 100%;
  }
}

// if you like the 3rd column to be expanded on bottom then change the one media query to:

@media only screen and (min-width: 600px) and (max-width: 989px) {
  .custom-css .entry-content-wrapper .flex_column {
    flex: 0 1 47%;
  }
  .custom-css .entry-content-wrapper .flex_column:nth-of-type(3) {
    flex: 0 1 96%;
    text-align: center
  }
}

Column1

Ich bin der Geist, der stets verneint!
Und das mit Recht; denn alles, was entsteht,

Click me

Column2

Ist wert, daß es zugrunde geht;
Drum besser wär’s, daß nichts entstünde.

Column3

So ist denn alles, was ihr Sünde,
Zerstörung, kurz, das Böse nennt,
Mein eigentliches Element.

Click me