Homepage banner/header covering my gallery images. Please help fix!

[katiesottile]

My header on the homepage is covering my gallery images and cutting the tops of them off. I tried adding a padding of 165px to the header but it applied to all pages of my site. Is there a code to apply the header padding only to the homepage or another way to resolve this?

The first photo below properly shows my images under the header as the page loads. Then by the time the page is done loading they look like the second photo below where the tops are cut off.

Any solutions are appreciated. Also, this occurs on the mobile version too so I am interested in a code that address both desktop and mobile.

Thank you!

My URL is www.skyeandsage.com password: rohlyu

-Katie

[katiesottile]

SOLVED:

Here is the code that worked to apply the padding to only the home page:

@media only screen and (min-width: 750px) {

.template-index .main-content {

padding-top: 165px;

}

}

[KetanKumar]

@katiesottile

i can see this view