Help centering columns

Support
#1

Hi there. I used some CSS I found on the form to create space between colored columns on mobile, but I want them to also be centered on mobile: https://afn.strategiccommunication.biz/residential/

Here’s what I’m using: @media screen and (max-width: 767px) {
.my-section .x-column {
margin-bottom: 3%;
width: 80%;
}

@media screen and (max-width: 480px) {
.my-section .x-column {
margin-bottom: 5%;
}
}

Thanks for the help!

#2

Hello @Lorie,

Thanks for asking. :slight_smile:

Please can add following CSS under under Pro > Theme Options > CSS:

@media only screen and (max-width: 767px) {
    .my-section .x-column {
            margin: 0 auto !important;
    }
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thank you.

#3

Hi there. Thank you. The problem with that code is that I want space between the columns when they get stacked on the mobile version, so there needs to be a bottom margin.

#4

Hi Lorie,

Please update the code to:

@media only screen and (max-width: 767px) {
    .my-section .x-column {
            margin: 0 auto 3% !important;
    }
}

You can read more about the CSS margin property here:

https://www.w3schools.com/css/css_margin.asp

Hope this helps.

#5

Thanks. That actually didn’t change anythign, but I fixed the issue by adding this: margin-right:auto; margin-left: auto;

Really appreciate all the help!

#6

You are most welcome. :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.