How to increase margin/padding on footer parts? (Brooklyn Theme)

Store Design

Topic summary

Main issue: Increase white space in the Brooklyn theme footer—between the newsletter button and the Shopify copyright label (desktop), and between the footer menu and the Instagram grid (mobile). Images are referenced but not provided.

Proposed CSS fixes:

  • Add in theme CSS: .site-footer__copyright-content { padding-top: 20px !important; }
  • For mobile (≤590px): .site-footer .grid__item { padding-top: 16px !important; }
  • Alternative in assets/theme.scss.liquid: p.site-footer__copyright-content { margin-top: 15px; } and, under a media query (max-width: 590px), ul.no-bullets.site-footer__linklist { margin-top: 20px; }.

Implementation notes:

  • One reply specifies adding code at the bottom of assets/theme.scss.liquid. Another user asks whether to place it there or in the footer section, indicating uncertainty.

Follow-ups from the original poster:

  • Wants a header text above a custom (manually coded) newsletter button aligned with other footer columns.
  • Wants copyright and payment icons centered at the bottom on desktop. A link to the newsletter code source was provided.

Status:

  • Initial spacing suggestions were provided and acknowledged. The header/centering requests and a newcomer’s “where to put the code” and “not working” issues remain unresolved/ongoing.
Summarized with AI on March 4. AI used: gpt-5.
1

Hi,

I need to add margin / white space on several sections around the footer.

  1. First part is between the newsletter button and the Shopify copyright label as they’re too close to each other (see pic 1)

  2. Second part is on the Mobile version between the Footer menu and the Instagram grid section (see pic 2)

2

Store url is www.shupey.com

Password is pages1

1 Like
3

easy just add this code in your theme css

.site-footer__copyright-content

{

padding-top: 20px ! important;

}

@media screen and (max-width: 590px)
timber.scss…040490151:1
.site-footer .grid__item {
padding-top: 16px !important;
}

if you don’t know I’m happy to help with
thank you

1 Like
4

@Johnny_HTG

Please add the following code at the bottom of your assets/theme.scss.liquid file.

p.site-footer__copyright-content {
    margin-top: 15px;
}
@media only screen and (max-width: 590px){
ul.no-bullets.site-footer__linklist { margin-top: 20px; }
}

Hope this works.

Thanks!

2 Likes
5

Thank you very much. Do you think you could help me with two more things?

I’ve included my newsletter section on the footer thru coding, so I’m not using the actual newsletter form available with the Brooklyn theme.

How can I include a header text above the newsletter button so that it aligns with the other parts of the footer. And then, I would like to move the copyright button and the payment buttons in the bottom middle of the footer on desktop (see pic)

Thanks for any help !

6

Also, I found the newsletter code that I used from here if you wanted to see it:

https://community.shopify.com/topic/993969

7

Newbie to shopify here!

I need to add padding to the top of the footer section and I see the code you have added here.

When you say add it to your asset page, am I just adding it to the bottom of the assets page or do I put it in the footer section and edit what’s currently there.

Thanks for the guidance.

K

8

Trying to get this to work for me, but no luck. I just need a couple of space in padding at the top of my footer. It’s been driving me crazy!

Please help!

Thx in advance.

K