center Columns

Hi Monika,

The ID is not set on the Color Section, try to add this CSS code:

.page-id-20 #av_section_5 .flex_column_table {
    display: flex;
    gap: 4%;
    justify-content: center;
}

.page-id-20 #av_section_5 .flex_column_table .flex_column {
    display: block;
    width: 33%;
    margin-left: 0;
}

.page-id-20 #av_section_5 .flex_column_table .av-flex-placeholder {
    display: none;
}

Best regards,
Nikko

Hi Monika,

You’re welcome :)
By default, the body of the page has a class of page-id-ID, so when you use this CSS selector .page-id-20 it will only target the page with that ID number.
Also, Color Sections ID are auto-generated if you don’t set one, so if you don’t put one then it will automatically have the id of #av_section_1 and then increments in every Color Section. Also, Custom IDs are good idea if you only have one on the page since it’s supposed to be unique, if you use this layout twice in a single page then use Custom CSS Class instead of Custom ID Attribute. So what I suggest instead is to use a Custom CSS Class, let’s just name it center-columns (add this on each Color Section) and replace the code I gave you with:

#top .center-columns .flex_column_table {
    display: flex;
    gap: 4%;
    justify-content: center;
}

#top .center-columns .flex_column_table .flex_column {
    display: block;
    width: 33%;
    margin-left: 0;
}

#top .center-columns .flex_column_table .av-flex-placeholder {
    display: none;
}

Hope this helps.

Best regards,
Nikko

Hi Nathan,

I’m very happy to hear that!
Thanks for your kind feedback and thank you for using Enfold. :)

Best regards,
Nikko