6 columns are not working

Hi,
Have you tried to Enable the Avia Layout Builder Debugger and copied the shortcode from the documentation page to your test page

Then to test the css on the one page, just paste this into a code block element:

<style>
/*----------------------------------------
// 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;
}
}
</style>

Best regards,
Mike

Hi,
Thank you for the login, it seems that you can’t use the columns “equal height” option with this. But in your case they all look the same anyways. Please clear your browser cache and check, they are all in a single row now.

Best regards,
Mike

Hi,
I commented out the justify-content: center, check now.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike