3 Columns section behaves differently in Desktop and Mobile?

[alberto_me]

Hello,

In my gallery section at the end of the page I have a 3 columns section, that should host 3 button: to the left to one for going back to the previous page, in the middle the one for refreshing the page and scrolling up and to the right the one for going to the next page.

Now, everything works as it should, is just the visual aspect that doesn’t… in fact it displays the right layout in the desktop/laptop view and the wrong in mobile/tablet view.

It looks like in the desktop/laptop view they are all on the same line, as I want it to be. While in the tablet/mobile view, they are on 3 different horizontal lines…

Here are two screenshots to better show you what I mean:

Any idea of the reason why that is the case and how I could fix that?

Thanks in advance,
Alberto

[jade]

Hello Alberto,

That is because the columns stack on top of each other on mobile view. You can override that by following these steps:

#1 All a class to the section that contains the columns

#2 Add this code the Global CSS (the code below assumes that the class you have added to the section is inline-mobile so kindly change it in case you used a different class name)

@media (max-width: 767px) {
    .inline-mobile .x-container {
        display: flex;
    }
}

Hope this helps.

[alberto_me]

It unfortunately doesn’t seem to be working…

[thai]

Hi @alberto_me,

Please update the custom CSS to this:

@media (max-width: 767px) {
    .inline-mobile .x-container {
        display: flex !important;
    }
}

Hope it helps

[alberto_me]

Yes, thank you, that seems to be working!

[rad]

You’re most welcome!