How can I raise the footer background margin on my website?

Store Design
1

Hi there,

If you take a look at my website footer, you will see the footer text is too close to the edge of the footer background. I need the footer background to extend higher up. How do I do this?

elevatedkarma.com

password: chifri

Thanks for taking a look!

2

You could try adding some padding to the top. As an example, add this code to the bottom of theme.css

.site-footer.critical-hidden {
  padding-top:50px;
}

Result:

2021-11-29 20_18_12.png
2021-11-29 20_18_12.png1291×324 12.1 KB

1 Like
3

Thanks, Nick!

4

I’m still having the issue with my mobile page. Please take a look.

Elevatedkarma.com

password: chifri

Thanks!

5

Add this code at the bottom of theme.css

@media only screen and (max-width: 749px) {
.site-footer__content {
  padding-top:50px;
}
}
6

Hi @Nick_Marketing ,

That didn’t make a difference. Any other suggestions?

7

I would assume it is probably a cache issue. When I add the recent code on my end, there is an extra 50px padding added on the mobile version.

2021-11-29 21_22_58.png
2021-11-29 21_22_58.png334×559 11.5 KB

8

@Nick_Marketing , how strange! I closed the page, cleared my cache, visited the page, click around, refreshed. Nothing. It’s still not showing the added margin.

9

One more thing you can try is adding !important. Like this:

@media only screen and (max-width: 749px) {
.site-footer__content {
  padding-top:45px !important;
}
}
10

Hi @Nick_Marketing , that didn’t work either. Tried clearing cache, etc to verify.

11

Here’s the final piece of code you can try

@media screen and (max-width: 749px) {
footer.site-footer{
  padding-top: 50px !important;
}
}
12

This one didn’t work either.

Thanks for your help, @Nick_Marketing ! Appreciate all your suggestions!