How can I reduce footer padding on mobile view?

Store Design

Topic summary

A user is experiencing excessive padding in their website’s footer on mobile devices, which appears disproportionate to the rest of the site. An attached screenshot illustrates the issue.

Previous attempts:

  • A developer previously provided CSS code targeting .site-footer with a max-width media query of 749px, but this solution did not work.

Proposed solutions:
Three community members offered similar CSS-based fixes:

  • Dan-From-Ryviu suggested adding code to hide <br> tags within the footer using display: none and visibility: hidden at max-width 749px
  • INA_MSWEB recommended targeting .site-footer .grid__item br elements with display: none at max-width 768px
  • oscprofessional proposed hiding .footer.site-footer br tags using both visibility: hidden and display: none with !important flags

All solutions involve editing the theme.css file in the Assets folder and adding media queries to remove line breaks causing excess spacing. The discussion remains open with no confirmation of which solution resolved the issue.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone

I am desperately searching for an answer to resolve my issue.

The padding in the footer on mobile is way too ample compared to the rest on my website.

IMG_1392.PNG
IMG_1392.PNG1170×2532 186 KB

Previously a developer gave me a code

@media(max-width: 749px){
.site-footer > .page-width > .grid > .grid__item > br { display: none;}
}

But it does not work.

Any idea how could I remove this space please ?

That is more or less the designe I want .

That is more or less what i want .
That is more or less what i want .1170×862 28.2 KB

Website: yohandeschamps.net

Theme: Impulse

Thank you

Yohan

2

Go to your Online store > Themes > Edit code > Assets > open theme.css or theme.css.liquid file and add this code at the bottom and save file

@media screen and (max-width: 749px) {
.site-footer br {
display: none !important;
visibility: hidden;
}
}
3

Hi @YOYO74

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the theme.css file:
@media screen and (max-width: 768px) {

.site-footer .grid__item br {display: none}

}

Regards,

San

4

Hello @YOYO74

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

footer.site-footer br {
    visibility: hidden !important;
    display: none !important;
}