Adjusting spacing between cells in color section

Hey John,

The Layout Builder only supports up to 1/5 elements unfortunately, so you would need custom CSS in order to achieve that. I’m not sure which section you are referring to though, since the text your quoted is not there on your actual site. If you have a screenshot or mockup highlighting your intentions then that would help us understand better as well.

Best regards,
Rikard

Hi,
Thank you for the login and screenshot, I see that you have the Avia Layout Builder Debugger activated so I copied your page to a new page and removed the other elements.
Then I cloned your 2/5 columns and changed them to 1/3 columns so there would be three per row for a total of nine.
I also added a custom ID of “shazam” to your color section and a custom class to the bottom of the second Separator element for the example.
Then I added a code block element to hold the css for this example page, which at some point could be added to your other css, if you wish.

#shazam .av-flex-placeholder {
	 width: 7% !important;
}
.shazam-whitespace {
	margin-bottom: 2% !important;
}

So the result is a 3×3 grid with a “equal” space around each block, it is not exactly “equal” as it is manually created with the above css, but it is very close.
Please see the link and screenshot in the Private Content area and clear your browser cache and check the live page.
Is this what you had in mind?

Best regards,
Mike

Hi,
Thank you for the feedback, please try this css instead:

@media only screen and (min-width: 768px) { 
.responsive #top #wrap_all #shazam .flex_column.av_one_third {
    transform: scale(1) !important;
}
}
@media only screen and (max-width: 767px) { 
	#shazam .av-flex-placeholder {
	 width: 0 !important;
}
.responsive #top #wrap_all #shazam .flex_column.av_one_third {
	margin-right: auto !important;
    margin-left: auto !important;
    width: 90% !important;
    transform: scale(1) !important;
}
#shazam .hr.hr-invisible {
	height: 0 !important;
}
}

After applying the css, please clear your browser cache and check.

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