How can I reduce header and footer padding in Loft Theme?

[AlbertPala]

Hi there!

I was wondering how I can reduce the header and footer padding (both desktop and mobile website) with the Loft Theme.

Any help would be grate. Thanks in advanced!

[Made4uo-Ribe]

Hi @AlbertPala ,

Would you mind to share your URL websie with password if its protected? Thanks!

[AlbertPala]

Hi @Made4uo-Ribe ,

Thanks for your interest. Yes, sure, here the URL:

https://www.automotiveicons.com/

Thanks in advanced!

[Made4uo-Ribe]

Thank you for the Information, the header seems good on my screen.

Try this for the footer:

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
4. And Save.

.footer__block-wrapper {
    padding-top: 0px;
    padding-bottom: 0px;
}

Result:

This will also decrease on the mobile but if not enough you add this one.

@media only screen and (max-width: 768px){
.grid--full.footer__content {
    padding-bottom: 0px;
}
.subsection__wrapper {
    padding-top: 0px;
}
}

Result mobile:

I hope it help.

[PageFly-Richard]

Hi @AlbertPala

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Theme.css

.header__wrapper, .pre-header__wrapper {
    padding: 0px 4% !important;
}
@media screen and (min-width: 769px){
.footer__block-wrapper {
    padding: 0px 4% !important;
}
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly

[AlbertPala]

Thanks a lot, it worked!

[Made4uo-Ribe]

Glad to hear that, your welcome.