Banner Height Dawn Theme

Solved

Banner Height Dawn Theme

MinhajAhmed106
Excursionist
54 1 10

Hello, Guys

 

I want to reduce my header and footer height to minimum so it can look pleasing, i tried everything but nothing works. please let me know the solution in here as i want to learn it, not just ask some one to do it. thank you in advance, below is the link to my store.

 

https://devicedinedesign.myshopify.com/

Accepted Solution (1)

nvchien
Shopify Partner
55 23 13

This is an accepted solution.

Hi @MinhajAhmed106 

 

1/ Header, The problem with the header is due to the excess spaces in your logo. You can crop the image to remove these spaces and then try re-uploading the logo as follows:

logo_crop.png

2/ Footer: To reduce the spacing in the footer, you can update the CSS code as follows:

Find 'section-footer.css' and add the following code at the bottom:

.footer__content-top {
  padding-bottom: 0;
}

.footer__content-bottom {
  padding-top: 0;
}

.footer__copyright {
  margin-top: 0;
}

.footer__content-bottom {
  padding-bottom: 15px;
}

 

Hope this helps.

- If this solution helped you out, please consider accepting it as a solution and giving it a thumbs-up. Your feedback is valuable to me and the community!
- If you're feeling extra generous, you can always buy me a coffee . Your support helps fuel my Shopify knowledge and keeps the solutions flowing!
- You can also follow more tips and tricks from my blog.

View solution in original post

Replies 3 (3)

nvchien
Shopify Partner
55 23 13

This is an accepted solution.

Hi @MinhajAhmed106 

 

1/ Header, The problem with the header is due to the excess spaces in your logo. You can crop the image to remove these spaces and then try re-uploading the logo as follows:

logo_crop.png

2/ Footer: To reduce the spacing in the footer, you can update the CSS code as follows:

Find 'section-footer.css' and add the following code at the bottom:

.footer__content-top {
  padding-bottom: 0;
}

.footer__content-bottom {
  padding-top: 0;
}

.footer__copyright {
  margin-top: 0;
}

.footer__content-bottom {
  padding-bottom: 15px;
}

 

Hope this helps.

- If this solution helped you out, please consider accepting it as a solution and giving it a thumbs-up. Your feedback is valuable to me and the community!
- If you're feeling extra generous, you can always buy me a coffee . Your support helps fuel my Shopify knowledge and keeps the solutions flowing!
- You can also follow more tips and tricks from my blog.
MinhajAhmed106
Excursionist
54 1 10

Thank you so much brother ! May GOD bless you 🙂

Anshul_arora
Navigator
450 128 93

Hello @MinhajAhmed106 


I understand you are looking to reduce the height of Header & Footer section of your store.


Please add the below code at the bottom of theme.liquid file before </body> tag and save.

<style>

.header-wrapper.color-scheme-2.gradient {
height: 120px !important;
}

.footer__content-top.page-width {
height: 175px !important;
}

</style>


Output will be like this -: https://prnt.sc/oHUMh1IBYmps, https://prnt.sc/RMeTDM9DgEHe


I hope the code helps you.


Please share if you have any queries.


Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here