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

Home Forums Support [Resolved] How do I exclude homepage as well as category page with CSS?

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1483473
    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!

    #1483675
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1483735
    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!

    #1483827
    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.

    #1483836
    Elvin
    Staff
    Customer Support

    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;
        }
    }
    #1483888
    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.

    #1483949
    Andy

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

    #1483960
    Elvin
    Staff
    Customer Support

    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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.