4 columns behaviour on mobile

Support
#1

Hi guys. See attached. On my front page close to the top I have a 4 column row with buttons. At small resolutions is appears as a one column view. I want it to be 2x2 - i.e. two buttons (columns) per row. Tried to assign a class and reduce width, but no luck. This must be very simple, but … Well, can you help, please?

#2

Hello There,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

#3

Sorry, I forgot. Take a look at http://nblund.com - it is right there on the front page. Thanks.

#4

Hello There,

Thanks for providing the url. To resolve your issue, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(max-width: 979px){
    #x-section-16 .x-column {
        width: 48%;
        float: left;
        margin-right: 4%;
    }

    #x-section-16 .x-column:nth-child(2n){
        margin-right: 0;
    }

    #x-section-16 .x-column:nth-child(2n+1) {
        clear: both;
    }
}

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

#5

Excellent. Worked smoothly. Thanks :slight_smile:

#6

Hi @nblund,

Happy to hear that.

Feel free to ask us again.

Thanks. :slight_smile: