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,
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.
So ist denn alles, was ihr Sünde,
Zerstörung, kurz, das Böse nennt,
Mein eigentliches Element.
.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,
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.
So ist denn alles, was ihr Sünde,
Zerstörung, kurz, das Böse nennt,
Mein eigentliches Element.
