From 4 column on desktop to 2 column on mobile

Support
#1

Hello,

I’ve been browsing the support topics but I was unable to find a solution for my issue.
I’d like to convert a 4 column section into a 2 column section on mobile view.
How can I achieve this?
Website:

Summary

https://industrylight.nl/collectie-2/

Hope you guys can help out. You’re doing an amazing job!!

#2

Hello Marcel,

Thanks for writing in!

Please inspect the section that you want to hide on mobile devices and under Customize > Setup > Hide During Breakpoints select Desktop and Laptop icons.

Here’s a screencast that you can take a look.

Thanks.

#3

Thanks for your reply,

I think I wasn’t clear in my first post. I don’t want to hide anything, I just want the 4 column layout to turn into a 2 column layout on mobile. hoe can I achieve this?

Thank you in advance.

#4

Hello Marcel,

Thanks for updating the thread. :slight_smile:

Please take a look at the solution shared in following thread:

Thanks.

#5

Thank you for the reply,

tried that one already, it still doesn’t do the job. I’ve tried all the solutions here at the support page but none of them seem to work in my case unfortunately.
Any other idea?
Thanks.

#6

Hey Marcel,

I see you’ve already given a class stay-inline to the section that has four columns. Now to display two column layout on mobile devices, please add the following code in the Theme Options > CSS:

@media screen and (max-width: 767px) {
    .stay-inline .x-column {
        width: 48%;
        margin-right: 4%;
        float: left;
    }
    .stay-inline .x-column:nth-child(2n) {
        margin-right: 0
    }
    .stay-inline > .x-container {
        width: auto;
    }
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#7

Thank you very much that worked very well!!

#8

You are most welcome. :slight_smile:

#9

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