Change padding on all pages *except* homepage

[DanCarroll]

Hi there,

I used a bit of code to showcase a different sized banner depending on if someone is viewing on desktop or mobile (this tutorial: https://www.mojoin.com/show-shopify-banner-image/) which has worked great, however I have noticed that as a result the content of each page has no padding between the title and the header.

I believe I have found the line of code causing this, however if I edit it to increase the padding then it creates a gap between the banner and the header, which I do not want.

.main-content {padding-top: 0;}
.yx-desktop-hidden{
width: 100%;
padding: 0 !important;
}
.yx-mobile-hidden{
padding: 0 !important;
max-width: 100vw !important;
}

Is there a way to universally increase the padding on each page (collection, product etc) without it changing the padding for the homepage banner?

My url is www.bahookiedukes.com

Cheers!

[KetanKumar]

@DanCarroll

can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.index-section {
    padding-top: 20px;
    padding-bottom: 20px;
}
#shopify-section-16490089689343073a hr.hr--invisible {
    display: none;
}
.main-content {
    padding-top: 40px;
}

[DanCarroll]

Hello @KetanKumar ,

That fixed the issue on the product and collection pages, however it added padding between the desktop banner and header which I don’t want (see screenshots). Is there a way to stop this code applying to the banner/homepage?