Target homepage only while using @media

Hi there,

Please can someone help me?!

I wanted to push the slider up and remove the header on the homepage only of my site using mobile (without this there is a white space above the header which I didn’t like)

But in doing so it has pushed all the other headers up on the other pages so you can’t read them.

I just want to do it on the home page (pg id-8) only, but I can’t work out how to target just that page.

My site is www.bethanyritchie.com

and the code I used is

@media only screen and (max-width: 1024px) {

    .site-header {
        background-color: transparent;
        padding-top: 0 !important;
    }

    .site-header.fixed {
        position: absolute !important;
    }
}

As I said, this did what I wanted it to but now it’s messed up the other pages!

Thanks so much for reading!

I have managed to fix it, I didn’t realise I needed to add page targets to both sections of the code! Here is the code for anyone else who needs it!

@media only screen and (max-width: 1024px) {

    .page-id-8 .site-header {
        background-color: transparent;
        padding-top: 0 !important;
    }

    .page-id-8 .site-header.fixed {
        position: absolute !important;
    }
}