Hello Shopify Community:
I am trying to remove blank space above and below my site's footer (using the Debut theme). I have tried out multiple solutions posted in response to other site owners' questions (adding new code to my site's theme.css asset), but so far none have worked. You can see the footer live at www.sweetgallore.com, and the image below shows the multiple areas I'm trying to remove. I assume these are all placeholders for elements I've elected not to use in the footer, but I don't understand why so much space is taken up in their absence. Thanks in advance!
Solved! Go to the solution
This is an accepted solution.
Please add the following code at the bottom of your assets/theme.css file.
.site-footer__item{
margin-bottom: 0px !important;
}
.site-footer__hr{
margin: 20px 0 20px 0 !important;
}
@media only screen and (min-width: 750px){
.site-footer-item-tall { display: none; }
}
footer .page-width hr{
display: none;
}
Hope this helps.
Thanks!
Thank you! I added the code to my code, and the extra space was removed. There is still some spacing at the very bottom of the footer. Is there anything that can be done to reduce the size further? If not, it's not a big deal. The reduced blank space your code provided is already much better!
This is an accepted solution.
Please add the following code at the bottom of your assets/theme.css file.
.site-footer {padding-bottom: 0px !important;}
.site-footer .centered {text-align: center; margin: 0px !important;}
Hope this helps.
Thanks!
One follow up question: would you please share the code to reduce the one remaining blank space I've highlighted in the image below? Thanks again for all of your fantastic help!
This is an accepted solution.
Please add the following code to remove the space above.
.site-footer{
padding: 0px 0 55px 0 !important;
}
Thanks!
User | Count |
---|---|
395 | |
202 | |
146 | |
42 | |
40 |