Column behavior on different sized screens

Support
#1

Hi there, see:

https://wordpress-171232-956414.cloudwaysapps.com/

If you scroll down, Im trying to make the icons stack 6 on a desktop/ipad landscape.

3 x 3 on an ipad portrait/mobile landscape

and 2 x 2 on ipad/mobile portrait.

Is this possible?

Thanks.

#2

Hello @logoglo,

Thanks for writing in!

Yes, it is possible. To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width:979px){
    .home #x-content-band-4 .x-column.x-sm.vc.x-1-6 {
        width: 30.66666%;
    }

    .home #x-content-band-4 .x-column.x-sm.vc.x-1-6:nth-child(3n){
        margin-right: 0;
    }
}

@media(max-width:767px){
    .home #x-content-band-4 .x-column.x-sm.vc.x-1-6 {
        float: left;
        width: 48%;
    }

    .home #x-content-band-4 .x-column.x-sm.vc.x-1-6:nth-child(2n){
        margin-right: 0;
    }
}

@media(max-width:480px){
    .home #x-content-band-4 .x-column.x-sm.vc.x-1-6 {
        float: none;
        width: 100%;
        margin-right: 0;
    }
}

Please let us know if this works out for you.

#3

Thanks! will give it a try, the ipad layout is a little messed up, text bleeding into each other, how can i fix this?

#4

Hello @logoglo,

Please try to update the code to:

@media(max-width:1151px){
    .home #x-content-band-4 .x-column.x-sm.vc.x-1-6 {
        width: 30.66666%;
    }

    .home #x-content-band-4 .x-column.x-sm.vc.x-1-6:nth-child(3n){
        margin-right: 0;
    }
}

@media(max-width:767px){
    .home #x-content-band-4 .x-column.x-sm.vc.x-1-6 {
        float: left;
        width: 48%;
    }

    .home #x-content-band-4 .x-column.x-sm.vc.x-1-6:nth-child(2n){
        margin-right: 0;
    }
}

@media(max-width:480px){
    .home #x-content-band-4 .x-column.x-sm.vc.x-1-6 {
        float: none;
        width: 100%;
        margin-right: 0;
    }
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

#5

This worked! thanks.

#6

Glad we could help.

Cheers!

#7

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