How to make sidebar come up first on mobile EXCEPT on all Posts

[SeekGod]

Hi there,

awhile back someone from your awesome support team gave me some code to make the sidebar come up first on mobile. This is the 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;
}
}

Now, I’m wondering how can I make it so that this code does not take effect on all the POSTS? I want to exclude all posts from this…

Thank you for your help…

-Joshua

[jade]

Hey Joshua.

You can make use of the :not selector to exclude the single posts in the code just like this:

@media (max-width: 979px) {
    body:not(.single-post) .x-container {
        display: flex;
        flex-flow: column wrap;
    }
    body:not(.single-post) .x-container .x-sidebar {
        order: 1;
    }
    body:not(.single-post) .x-container .x-main {
        order: 2;
    }
}

https://www.w3schools.com/cssref/sel_not.asp

Hope this helps.

[SeekGod]

Hi Jade,

So would I just add this to the code I already have?

[thai]

Hi @SeekGod,

You have to replace your custom CSS with the code of @Jade provided.

Regards!

[SeekGod]

It’s working perfectly! Thank you.

One more question, if I wanted to exclude a certain page from this as well, what would I do? The page ID is “15”

Thanks

[jade]

Hi there,

If it is a page, please update the code to:

@media (max-width: 979px) {
    body:not(.page-id-15) .x-container,
    body:not(.single-post) .x-container {
        display: flex;
        flex-flow: column wrap;
    }
    body:not(.page-id-15) .x-container .x-sidebar,
    body:not(.single-post) .x-container .x-sidebar {
        order: 1;
    }
    body:not(.page-id-15) .x-container .x-main,
    body:not(.single-post) .x-container .x-main {
        order: 2;
    }
}

Hope this helps.

[SeekGod]

Awesome. Thank you guys so much!

[friech]

We are delighted to assist you with this.

Cheers!