Docs

[hansglasmann]

Hello!

I have a specific layout for my blog page on my website. I want to maintain the layout on mobile but when I view it as a mobile, the images are displayed one at a time, rather than they way I do my desktop layout. Is there a way to force the layout?

my website is:

http://www.lemonbaum.com/blog

[Rad]

Hi there,

Thanks for writing in.

Images will become too small when displayed on mobile. But may check this other thread, https://community.theme.co/forums/topic/reducing-margins-between-columns-in-integrity-throughout-site/#post-1198750

The solution is creating your own columns for mobiles. By design, X theme will collapse to single column for readability and like from google mobile optimization, it requires that all elements are readable.

Still, you can create columns with the same idea as provided from that thread. Since we’re only applying it to that page, you’ll have to prepend the .page-id-772 on each clas declaration. Example,

.page-id-772 .x-container:not(.marginless-columns) .x-column.x-1-3 {
margin-right: 2%;
width: 32%;
}

And change @media ( min-width: 768px ) to @media ( max-width: 767px ) to target mobile devices.

Hope this helps.

[hansglasmann]

Under the global custom css I typed out the following:

@media ( max-width: 767px ) {

/* the main CSS for changing columns spacing and gap */
  
.page-id-722 .x-container:not(.marginless-columns) .x-column.x-1-2 {
margin-right: 2%;
width: 49%;
}

.page-id-722 .x-container:not(.marginless-columns) .x-column.x-1-3 {
margin-right: 2%;
width: 32%;
}
  
.page-id-722 .x-container:not(.marginless-columns) .x-column.x-1-4 {
margin-right: 2%;
width: 23.5%;
}

.page-id-722 .x-container:not(.marginless-columns) .x-column.x-1-5 {
margin-right: 2%;
width: 18.4%;
}
/* make sure they are on the same line */

.page-id-722 .x-container:not(.marginless-columns) .x-column {
float: left;
}

/* Since there is no 4th column, let's remove the gap after the last column (which is 3rd colum) */

.page-id-722 .x-container:not(.marginless-columns) .x-column:last-child {
margin-right: 0px !important;
  
}

}

It isn’t functioning to maintain the column layout so I’m assuming I’ve done something wrong.

If not, any other ideas?

[Jade]

Hi there,

Please try this code:

@media ( max-width: 767px ) {

    /* the main CSS for changing columns spacing and gap */

    .page-id-772 .x-section .x-container.marginless-columns .x-column.x-1-2 {
        margin-right: 2% !important;
        width: 48% !important;
        float: left !important;
    }

    .page-id-772 .x-container .x-column.x-1-3 {
        margin-right: 2% !important;
        width: 32% !important;
        float: left !important;
    }

    .page-id-772 .x-container .x-column.x-1-4 {
        margin-right: 2% !important;
        width: 23.5% !important;
        float: left !important;
    }

    .page-id-772 .x-container .x-column.x-1-5 {
        margin-right: 2% !important;
        width: 18.4% !important;
    }
    /* make sure they are on the same line */

    .page-id-772 .x-container .x-column {
        float: left !important;
    }

    /* Since there is no 4th column, let's remove the gap after the last column (which is 3rd colum) */

    .page-id-772 .x-container .x-column:last-child {
        margin-right: 0px !important;

    }

}

Hope this helps.

[hansglasmann]

Replaced the code, but it still defaults to the individual image.

Any other suggestions?

[hansglasmann]

So, I think i noticed something. It works if in the customizer I have it show me mobile mode. But when i pull it up on my iPhone 6 it doesn’t work. Is it a problem with iphone pixel ratio?

[hansglasmann]

Nevermind. I’m an idiot. Helps if you save and publish right?

Thank you for all your help! You guys are the best.

[Thai]

Glad you’ve sorted it out.

If you need anything else, please let us know 🙂

[Author]

Posts