Alignment issue in Global Block columns on mobile

[noizepro]

Hello -
I’m using some Global Blocks to hold some icons with links on our homepage and they aren’t aligning properly when on mobile. Can someone help me sort that out?
You will have to log in to see it because I have a maintenance plug-in activated.
I will include the log-in info in a secure note.
https://hipcookeville.com

Thanks for your help!
Katie

[ruenel]

Hi There,

Thanks for writing in! You have place the icons in each column and align it to the left or right. In smaller screens, the columns will become wider and still applying the text alignment. To center the icons, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.cs-content.x-global-block .x-column{
    text-align: center;
}

Hope this helps. Please let us know how it goes.

[noizepro]

Isn’t there any way to keep the icons next to each other on mobile? There is plenty of room in the column.

[ruenel]

Hello There,

To collapse the column and make it inline, please have the code updated and use this instead:

.cs-content.x-global-block .x-column{
    text-align: center;
    width: auto;
    display: inline-block;
}

We would loved to know if this has work for you. Thank you.

[noizepro]

This didn’t really work. It looks good on mobile, but on the computer screen it moves both icons to the left of the column.

[nabeel]

Hi again,

You can replace the previous code with the following one:

@media screen and (max-width: 767px) {
    .cs-content.x-global-block .x-column{
        text-align: center;
        width: auto;
        display: inline-block;
        margin-right: 20px;
    }
}

Hope this helps!