I would like to have 6 columns in one row, but instead of 6 1/6 columns, I would like to achieve 1/6,1/3,1/3,1/6. I am using the below CSS.
I am trying to get 3 1/3 columns and 1/6,1/3,1/3,1/6 directly below on the same color section if possible.
/*—————————————-
// Create more than six Columns
//————————————–*/
#av-extra-columns .entry-content-wrapper {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
#av-extra-columns .column-top-margin {
margin-top: 0 !important;
}
#av-extra-columns .flex_column {
width: 14%;
flex-basis: 14%;
margin-left: 2%;
margin-top: 20px!important;
}
#av-extra-columns .flex_column.first {
clear: none!important;
margin-left: 2%;
}
/* Two columns in mobile */
@media only screen and (max-width: 768px) {
#av-extra-columns .flex_column {
margin-bottom: 20px!important;
margin-top: 20px!important;
/* Width of the container */
flex-basis: 40%;
}
#av-extra-columns .flex_column:nth-child(even) {
margin-left: 10%!important;
}
}
Hey leahmessina,
Could you please attach a mockup of what you’re trying to achieve?
Best regards,
Victoria