How can I decrease padding in the Brooklyn Theme?

Store Design

Topic summary

Reducing vertical spacing in a Shopify Brooklyn theme is the main issue, especially the large top and bottom padding around a rich text section and the gap between the header and page content. A screenshot was provided to show the oversized spacing, and code edits in the theme stylesheet were described as central to the discussion.

Key suggestions shared:

  • Edit the theme code in Shopify Admin: Online Store > Themes > Actions > Edit code.
  • Add custom CSS at the bottom of theme.scss.css / theme.scss.liquid.
  • One proposal uses a general rule for section spacing: .index-sections .shopify-section { margin-top: 35px !important; }.
  • Another proposal targets specific section IDs to adjust top and bottom margins.

The original concern that SCSS support might be deprecated was raised, but no direct confirmation was given. The discussion remains open: a follow-up question asked whether the header-to-content gap can also be reduced and whether changes would affect mobile layout, and the latest reply requested a clearer screenshot of the exact section.

Summarized with AI on March 6. AI used: gpt-5.4.
1

HI

I am wondering about how can I reduce the padding for rich text part .

I want to reduce top and bottom padding because it’s too big for me .I have tried a lot of solutions in theme.scss.liquid ,but it didn’t work .

I don’t know if support for SCSS has been deprecated in templates on Shopify .

Pls help me !

Url: sales.bellissimochina.com

LEUNGGUOTAO_0-1626854022941.png
LEUNGGUOTAO_0-1626854022941.png1840×529 65.1 KB

1 Like
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

My URL : sales.bellissimochina.com

Thanks

1 Like
4

Hello There,

1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:

.index-sections .shopify-section {
margin-top: 35px!important;
}
5

@LEUNGGUOTAO

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

div#shopify-section-162614941816744220 {
    margin-top: 20px;
}
div#shopify-section-1626148358b01c5fb0{
margin-bottom: 20px;
}

Hope this helps.

Thanks!

6

Thanks !

If it’s possible I want to edit the gap betwwen header and content?

And also it will change the gap when we browse on smart phone?

7

hello @LEUNGGUOTAO

can you please share a screenshot of which section do you want to reduce space