I want to remove this space on my shopify home page

Store Design
, , ,
1

Hello,

I want to remove the space between the header and the collection on my home page.

here is the link : https://admin.shopify.com/store/embrace-the-grind-5535/themes/179268616525/editor

and here is the space that I want to remove (the space is in red) (between the header and the collection).

Capture d’écran 2025-09-01 à 17.16.54
Capture d’écran 2025-09-01 à 17.16.542134×772 145 KB

Thanks.

2

Hello @embracethegrind ,

I hope you are doing well!

Can you please provide the password or the collaborative code so that I can check it and fix it for you?

3

Hi,

how can I do that?

4

here is the link https://embrace-the-grind.com/

5

Basically, I wasn’t able to see any extra or class. Could you please provide me access to your store so I can inspect it directly and share the correct solution? There are a few possible workarounds (e.g., setting header { padding-bottom: 0; }, using negative margins, or adjusting the main content’s padding-top/margin-top), but these are not the proper methods. A direct check will help me suggest the correct fix.

To provide the collaborative code, you need to go to Settings >> User and permission >> Scroll to the bottom, you will be able to see the collaborative code. The collaborative code is private so please send me the code in message.

6

Hey @embracethegrind,
Thanks for sharing the Store url. I just take a look to your store and found the same gap that you show in the ScreenShot.
In order to remove it you need to follow these steps.
Go to Shopify Admin >> Online Store >> Edit Code >> base.css
In the end of base.css you need to paste the following below code.

.grid.product-grid.contains-card.contains-card--product.contains-card--standard.grid--2-col-desktop.grid--2-col-tablet-down {
  margin: 0 !important;
}

Results:
Now you will not see any gap between the header and the slideshow.
if you have any more Question then feel free to ask.
If this was helpful Mark as Solution and Like it so that other can find it.

7

An element in your Featured collection section has top margin which adds this gap.
You can remove it by adding this to the sections “Custom CSS” setting:

.product-grid {
  margin-top: 0;
}

This will apply to this section only.
No need to edit theme code and you want to avoid this to make future theme updates easy.

8

Hey @embracethegrind ,

I checked your screenshot — the extra white space between the header and the collection section on your Shopify homepage is coming from the default section padding/margin.

Remove Space Between Header and Collection

You can fix this by adding a small CSS snippet:

/* Remove space between header and first section */
.template-index .shopify-section:first-of-type {
   margin-top: 0 !important;
   padding-top: 0 !important;
}

If your theme has a custom.css or base.css file:

  1. Go to Online Store → Themes → Edit Code.
  2. Open Assets → base.css (or theme.css / custom.css depending on your theme).
  3. Paste the above code at the bottom.
  4. Save → Refresh your homepage → The gap will be gone.

Like this thing sometimes happens with dynamic Liquid code + theme padding, but no worries at all — if you want me to implement this directly for you, please reach out.

Here is my portfolio (you can also get my contact + see past work): https://rajatweb.dev/

Best Regards,

Rajat / Shopify Expert