Mobile view - prevent column horizontal and vertical stacking

Support
#1

Hi There,

Hello,

I have 3 sections of 3 columns each using flexmethod.

When, the width passes below 767px, the columns are stacking. On smaller device, they become one column but they also don’t have any margin between each other.

I would like to get the same margin, no matter the resolution and the number of columns. Like on this page: https://www.advancedbiology.com/.

Could you please help to understand how I can achieve that.
Thanks a lot for your help.

Mathias

#2

Hi Mathias,

To add the margin for the columns on the small screen sizes, please add this custom CSS under Theme Options > CSS:

@media (max-width: 767px){
    .flexmethod .x-column {
        margin-bottom: 30px !important;
    }
}

For more information about the CSS media query, please take a look at this article:

Hope it helps :slight_smile:

1 Like
#3

Hi @thai

Thanks so much, I feel such a fool because it was too easy but I was lost with which margin I needed to use.
It works nicely, thanks.

You rock!
Cheers

#4

You’re most welcome, Mathias. :slight_smile:

#5

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