Columns change on 480px & smaller view

Support
#1

I’m trying to resolve an issue I’m having with my columns when making a template. I can’t seem to resolve this issue. I want the 4 small round clock images do be in line like they are in the (image on the left).

However, for some reason when i view this on 480px & smaller view the columns move and stack on top of each other like the (image on the right).

I have tried to play with the margins and the size of the image but I can’t seem to get them to remain the same in the 480px & smaller view.

Any help would be greatly appreciated. Thank you!

#2

Hi There,

Please add the my-row class to your row contains your columns:

After that adding this custom CSS:

@media (max-width: 979px){
    .x-container.my-row .x-column.x-1-4 {
        width: 22%;
        margin-right: 4%;
        float: left;
    }
    .my-row .x-column.last, 
    .my-row .x-column:last-of-type {
        margin-right: 0 !important;
    }
}

Hope it helps :slight_smile:

#3

Thank you! It fixed it!

#4

Glad we were able to help :slight_smile:

#5

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