Archived topic

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

7 replies · Started by Andy on October 11, 2020

Viewing posts 1–8 of 8

October 11, 2020 at 8:49 am #1483473

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!

October 11, 2020 at 11:26 am #1483675

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 :)

October 11, 2020 at 12:21 pm #1483735

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!

October 11, 2020 at 2:16 pm #1483827

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.

October 11, 2020 at 2:24 pm #1483836

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;
    }
}

October 11, 2020 at 3:31 pm #1483888

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.

October 11, 2020 at 5:06 pm #1483949

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

October 11, 2020 at 5:25 pm #1483960

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.

This archived topic is closed to new replies.

Start building better websites today.