Problem with trying to make 4 columns on desktop, 2 on tablet and 1 on mobile

Support
#1

Hi there.

I have followed the directions from earlier treads to make 4 columns colapse to 2 colums, but this is happening:

The next row push one of the columns under neath, if that makes sense. I have used this CSS:

@media (min-width:500px) and (max-width:1065px){
.oncolumnmobile .x-column {
width: 48%;
float: left;
margin: 1%
}
}

Any ideas?

#2

Hi There,

This issue happens because the height of columns is not the same.

To fix this issue, please add this custom CSS:

.x-section.sek.oncolumnmobile .x-column.x-sm.x-1-4 {
    max-height: 541px;
    margin-bottom: 45px;
}

Hope it helps :slight_smile:

#3

Hi again. Tried it, but it’s actin weird now as you can see on this video:

Any other ideas?

#4

Hi There,

Please remove my custom CSS and update your custom CSS to this:

@media (min-width:500px) and (max-width:1065px){
    .oncolumnmobile .x-column {
        width: 48%;
        float: left;
        margin: 1%
        max-height: 541px;
        margin-bottom: 45px;
    }
}

Hope it helps :slight_smile:

#5

Hi again.

Still acts weird :confused: See this:

#6

Hey @coedam,

Sorry for the confusion. As you can see the custom code provided here are not solid solutions. Custom coding or development is also outside the scope of our support. Right now, the supported method to achieve a 4 column desktop, 2 column tablet and 1 column mobile section setup is to use the Hide During Breakpoints feature. Please see how to do that in this video at https://youtu.be/SW8GijB-usM

If you wish to use the custom code, regretfully, we would be veering into custom development already which is outside the scope of our support. You will need to consult with a third party developer at this point.

Thank you for understanding.

#7

I see. Thank you

#8

You’re welcome.

#9

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