Wanna Remove Some Padding

Store Design
, , , , , , ,

Topic summary

Goal: reduce excess spacing on the homepage’s Featured Collections area (user called it padding, solutions adjust top margin).

Proposed solutions (all via theme edits):

  • Narrow, section-specific CSS (theme.css/base.css): .shopify-section–featured-collections .section { margin-top: 10px; } (variant also with 5px). Minimal impact outside this section.
  • Page-specific override in theme.liquid (before ): target a specific section ID and set margin-top: -37px !important. Strong, highly targeted change using a negative margin.
  • Global override (theme.css/base.css): .section { display: block; margin: 0 !important; }. Broadest scope; may remove margins across all sections sitewide.

Implementation steps consistently advised: Online Store → Themes → Edit code → edit theme.css/base.css or theme.liquid.

Evidence of effect: multiple before/after screenshots attached are central to understanding the visual change.

Status: no confirmation from the original poster, no accepted solution marked. Key open point: which selector/scope best fits without unintended site-wide side effects.

Summarized with AI on December 13. AI used: gpt-5.
1

i wanna remove some padding on my home page from here

url: https://themirage.store/

Screenshot 2024-11-26 165042.png
Screenshot 2024-11-26 165042.png1893×911 227 KB

1 Like
2

Hi @Emiway1

You can achieve this by adding this CSS code:
You just need to follow these steps:

  1. Go to the Online Store
  2. Edit Code
  3. Find theme.css / base.css

And past that CSS Code:

.shopify-section--featured-collections .section {
    margin-top: 10px;
}

The result will be like this:

Mehran_Ali_0-1732620501442.png
Mehran_Ali_0-1732620501442.png1897×758 191 KB

I hope this solution works for you!
If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going!

3

Hello @Emiway1

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

div#shopify-section-template--16577363443785__featured_collections_k33wR7 .section { margin-top: -37px !important; }

Result:

Tech_Coding_0-1732621093595.png
Tech_Coding_0-1732621093595.png1346×505 372 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

4

Hello @Emiway1

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
.shopify-section--featured-collections .section {
margin-top: 5px;
}

ZestardTech_0-1732621756238.png
ZestardTech_0-1732621756238.png1900×401 267 KB

5

Hello, @Emiway1

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
.section {
    display: block;
    margin: 0px !important;
}

Thanks!