How do I exclude homepage as well as category page with CSS?

[Andy]

Hi there,

I use this code for reducing margins:

@media (max-width: 768px) {
    body:not(.home).separate-containers .site-main {
        margin-top: 0;
    }
}

It successfully ignores the homepage and targets my single blog posts. Unfortunately, I’ve realized, the code still targets my category pages. I’d like to ignore both the homepage and category pages.

How do I edit this code to also exclude my category pages? Thank you!

[Tom]

Hi there,

Try this:

@media (max-width: 768px) {
    body:not(.home).separate-containers .site-main,
    body:not(.archive).separate-containers .site-main {
        margin-top: 0;
    }
}

Let us know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Andy]

Hi Tom,

Thank you, I tried this out but it didn’t work out, and I noticed it ignores the original body:not(.home) logic as well (mobile view). What are your thoughts?

I’ve shared the homepage and category pages in ‘Private information’ below. Thanks!

[Andy]

Hi Tom,

Just following up — I did some more testing.

It appears that the custom CSS does not work when both body:not(.home) and body:not(.archive) are applied simultaneously.

Interesting enough, if I apply one of these conditions, it works. They just don’t work at the same time. I’m stumped.

[Elvin]

Hi,

Just following up — I did some more testing.

It appears that the custom CSS does not work when both body:not(.home) and body:not(.archive) are applied simultaneously.

Interesting enough, if I apply one of these conditions, it works. They just don’t work at the same time. I’m stumped.

That’s strange. If that’s the case, you can try this:

@media (max-width: 768px) {
    body:not(.home).separate-containers .site-main {
        margin-top: 0;
    }
    body:not(.archive).separate-containers .site-main {
        margin-top: 0;
    }
}

A wise man once said:
"Have you cleared your cache?"

[Andy]

Hi Elvin,

Still doesn’t work when both are applied.

If one is applied it works, but not both. Pretty strange, I agree. I’ve included the links for you to take a closer look.

[Andy]

Hey guys, i’m gonna mark this as resolved. I’ll experiment with some different CSS. No worries. Thank you

[Elvin]

Hey guys, i’m gonna mark this as resolved. I’ll experiment with some different CSS. No worries. Thank you

That’s strange.

You can link us to the site to check further if in case you need more assistance regarding this.

Feel free to open a new topic if you have other concerns.

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts