Help removing white space between top and bottom of collection area

Store Design
, , ,

Topic summary

A user is attempting to eliminate unwanted white space appearing above and below a featured collection section on their Shopify homepage, positioned between the header and footer.

Initial troubleshooting:

  • Setting header margin to zero did not resolve the issue
  • Padding for the featured collection is already set to 0
  • The white space appears related to a headline element: when blank, white space shows; when filled with text, the background color extends properly

Proposed solutions:

  1. Adjust section padding - One responder suggested checking padding settings in the Shopify customizer for the relevant sections (with screenshot provided)

  2. Custom CSS fix - Another contributor provided specific CSS code to add to the theme’s stylesheet:

    • Remove footer top padding
    • Adjust product grid margins and add minimal top padding
    • Includes before/after visual comparison

Current status: The discussion presents multiple approaches but hasn’t confirmed which solution the original poster implemented or whether the issue was fully resolved.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

I am trying to remove the white space between the bottom of the header (and the top of the footer) between the top and bottom for the featured collection area on my homepage. I removed the header margin and made it zero but I can’t seem to figure out what code or what to edit to make this white bar disappear. Can someone help guide me?

Here is the link: https://0xyqxj-jv.myshopify.com/ it is running on a Shopify temporary link since I don’t have a domain of my own to register yet as I am trying out Shopify.

1 Like
2

@techab - please open your page in customize settings and go to these sections, your have set padding top and bottom to them, reduce it to the number you want and check, it can look like this. If you want then you can contact me here or on my email below

suyash1_0-1746778760751.png
suyash1_0-1746778760751.png1366×768 115 KB

3

The padding for the featured collection section is set to 0 already. It seems to be an issue with the headline, if it is blank, it has white space, if I type in text, it fills the section with the background color but I would like to not have a headline or title so I am trying to remove the white space and just have the background color fill the gap.

4

@techab - add padding , else if we remove the space then it will look like this

suyash1_0-1746780220877.png
suyash1_0-1746780220877.png1366×768 222 KB

5

Hi @techab

Check this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
footer.footer {
    padding-top: 0;
}

.grid.product-grid.contains-card.contains-card--product.contains-card--standard {
    margin-top: 0;
    padding-top: 20px;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!