More than 5 Columns in a Row – with Flexbox easy to create.
Important is that the flex container must be the direct parent of the items.
On this case i gave a Custom Class to the color-section : eight-columns
.eight-columns .entry-content-wrapper.clearfix {
display: flex !important;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
}
.eight-columns .entry-content-wrapper .flex_column {
flex: 0 1 10%;
margin: 0 !important;
}
On this case i gave a Custom Class to the color-section : ten-columns
and the columns are allowed to wrap if space is less than needed. Wrap normal and on that case they go to the left side.
Columns are not allowed to grow ( flex : 0 1 140px) when they have more space than needed
.ten-columns .entry-content-wrapper.clearfix {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.ten-columns .entry-content-wrapper::before,
.ten-columns .entry-content-wrapper::after {
display: none;
}
.ten-columns .entry-content-wrapper .flex_column {
flex: 0 1 25%;
margin: 0;
padding: 1%;
width: unset;
}
Webers Webdesign
Webers Webdesign
Ludwig-Schopp-Straße 27
53117 Bonn
Mit dem Laden der Karte akzeptieren Sie die Datenschutzerklärung von Google.
Mehr erfahren