Changing the margin in the footer

[dustland]

Hi, im having an issue with the margin at the bottom of my website. its too big.

I deleted the copyright (powered by) so its just the footer, and its huge. I want it to be just minimum space between the the policies and the end.

[-Ecom_Boss-]

@dustland Here is the code you can use

footer {
margin-bottom: 0;
padding-bottom: 0;
}

.footer-container { /* or whatever your footer wrapper class is */
margin-bottom: 0;
padding-bottom: 0;
}

body {
margin: 0;
padding: 0;
}

[dustland]

hi, where should i paste this? i know there are several options.

thank you

[Moeed]

Hey @dustland 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[goldi07]

Hello @dustland 

Got it — I see exactly what’s happening from your screenshot. 
When you removed the "powered by Shopify" or copyright, it left an empty space (padding or margin) at the bottom of the footer.

You need to adjust the CSS to reduce that unnecessary margin or padding.

Here's how to fix it:
You can add this CSS:

.footer {
  margin-bottom: 0px; /* Remove extra margin */
  padding-bottom: 10px; /* Minimal padding for breathing room */
}

Or, if your theme uses different class names (for example, some themes use .site-footer or .footer__content-bottom), you might need this instead:

.site-footer {
  margin-bottom: 0;
  padding-bottom: 10px;
}
.footer__content-bottom {
  margin-bottom: 0;
  padding-bottom: 10px;
}

Where to add this:
. Shopify Admin → Online Store → Themes → Customize

. Theme settings → Custom CSS (if your theme supports it)

or

. Online Store → Themes → Edit Code

. Find your theme.css or base.css (depends on your theme)

. Scroll to the very bottom and paste the CSS there.

Key goal:
. Margin = remove it to eliminate large space.

. Padding = keep a little (like 10px) so the footer links don't stick to the very bottom.

Thank you😊

[dustland]

thank you so much for the reply.

i did paste the code in the base.css and it still didn't do anything to it, I don't know whats going on at this point.

i tried with doing it in the theme settings and it actually made it bigger lol 

[goldi07]

Hey @dustland 

Ahhh okay — thanks for explaining clearly!
That gives me a really good idea of what’s happening.

Summary of what’s going wrong:

If you added the CSS and nothing changed → it's likely targeting the wrong class name.

If you added CSS in the theme settings and it got bigger → maybe extra padding/margin is already baked into other elements you didn’t target.

In short:
The problem isn't just the footer itself — it’s probably coming from a wrapper div around the footer (or maybe section-footer, or some Shopify-generated block).

Let's solve it properly:
Here’s a stronger CSS you should try that will definitely fix it:

footer {
  margin-bottom: 0 !important;
  padding-bottom: 10px !important;
}

.footer, 
.site-footer, 
.footer__content-bottom {
  margin-bottom: 0 !important;
  padding-bottom: 10px !important;
}

Notice the !important — it forces the browser to use your version even if other styles exist.

We’re now covering footer tag itself + possible Shopify classes.

Extra Tip (just in case):
If there's still big space after trying that, ALSO add:

.footer-wrapper {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

To make sure you are editing the right spot:
. In Shopify Admin → Online Store → Themes → Edit Code.

. Find base.css, theme.css, or theme.css.liquid depending on your theme.

. Scroll to the very bottom of the file.

. Paste the new CSS there.

Bonus Debug Tip:
If you right-click on the footer in your browser → "Inspect" → you can see which div or section is giving extra padding.
You might see things like:

. <footer class="site-footer">

. or <div class="footer-wrapper">

. or <section id="shopify-section-footer" ...>

This can help us laser-target it even more if needed.

Important:
Which theme are you using exactly? (e.g., Dawn, Refresh, Sense, etc.)

Every theme names its sections slightly differently — if you tell me your theme name, I'll give you a perfect 1-line fix you can copy-paste

What theme are you using?

Thank you 😊