X Pro Column Containers centered on all sections except section 1

[Woordenaar]

Hi there

Regarding my front page, visible at https://earpleasure.audio (login with ovsXL2017 to view the page)…

All rows in all my sections on the home page work perfectly when “column containers” is activated. The column containers are centering the row, being visible in the exact middle of the screen.

BUT

On the first section of my home page the “column containers” option for my row does not behave properly. It is aligned to the left instead of being centered.

How can I fix this?? How can I display those two columns centered??

This seems to be a bug of some sort. Or am I doing something wrong…?

[ruenel]

Hello There,

Thanks for writing in! This is not a bug. This is happening because in those mentioned section, you have set the margin of the row to zero. The margins were supposed to be zero for the top/bottom and auto for the left/right which is the default. Change it all to zero will shift the whole row to the left side. Please edit it and make sure that your row has a margin 0 and auto.

If you need anything else we can help you with, please let us know.

[Woordenaar]

Super! That fixed it

One more question… When I watch these two columns on mobile they are displayed under each other which is fine, but there is no gap between them. How can I make them have a gap between them? Here you can see what I mean:

[thai]

Hi There,

To fix this issue, please add the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 767px){
    .home #x-section-1 > div > div:nth-child(1) {
        margin-bottom: 25px;
    }
}

Hope it helps

[Woordenaar]

Super! That did the trick

[ruenel]

You’re welcome!
We’re glad we were able to help you out.