Adjusting layout for 768-979px views

[WaggingLabs]

Layouts with multiple columns are stacking in my 768-979 view. As seen on this page with the 2/3 + 1/3 layout and 1/3 column layout towards the bottom https://www.permanent.org/pledge/

I suspect I’ve changed some setting to make this happen, but can’t figure out what. (The homepage currently shows an adjusted layout I created specifically for tablets, but I this solution isn’t workable long-term)

I’d like to know how to make these columns appear inline instead of stacked at this view if possible.

Thank you!

[ruenel]

Hello @WaggingLabs,

Thanks for writing in!

You are having this issue because there is a custom css conflict. The issue happens due to this css block:

    .x-container{
        display:flex;
        flex-flow:column wrap;
    }

You can find that block in this @Media block code:

@media (max-width:979px){
    .x-container{
        display:flex;
        flex-flow:column wrap;
    }
    .x-container .x-sidebar{
        order:1;
    }
    .x-container .x-main{
        order:2;
    }
    aside.x-sidebar.right{
        margin-top:30px;
    }
}

Try to temporarily remove that @media code block and you’ll see that the columns will not collapse stacked below to each other.

Please let us know how it goes.

[WaggingLabs]

That did fix my 3-column layout, but that code was added to move the sidebar above the body on mobile — see this thread: https://theme.co/apex/forum/t/layout-page-title-then-widget-then-body-for-mobile/59779/3

Is there any way to retain that layout and fix the 3-column layout on tablet?

Thank you!

[ruenel]

Hello @WaggingLabs,

If that is the case, then you will have to update your custom css code and use this:

@media (max-width:979px){
    .x-container.offset{
        display:flex;
        flex-flow:column wrap;
    }

    .x-container.offset .x-sidebar{
        order:1;
    }

    .x-container.offset .x-main{
        order:2;
    }

    .x-container.offset aside.x-sidebar.right{
        margin-top:30px;
    }
}

We would love to know if this has worked for you. Thank you.

[WaggingLabs]

Thank you! This resolves my column layout on mobile.

What would need to be changed to target only the sidebar right layouts, but not blog, single post, or archive pages?

[nabeel]

Hey @WaggingLabs,

To do that, you can update the previous code with the following:

@media (max-width:979px){
    .page-template.page-template-template-layout-content-sidebar .x-container.offset{
        display:flex;
        flex-flow:column wrap;
    }

    .page-template.page-template-template-layout-content-sidebar .x-container.offset .x-sidebar{
        order:1;
    }

    .page-template.page-template-template-layout-content-sidebar .x-container.offset .x-main{
        order:2;
    }

    .page-template.page-template-template-layout-content-sidebar .x-container.offset aside.x-sidebar.right{
        margin-top:30px;
    }
}

Don’t forget to clear all caches including your browser’s cache after updating the code. Let us know how this goes!