Need to remove space between header and top section - debut theme

Store Design
, , ,

Topic summary

A user encountered unwanted white space between their header and a newly added section on their store locator page, causing the background color to show through.

Solutions Provided:

  • CSS modification to theme.css file: Add padding-top: 0px !important; to .main-content class (for screens min-width 750px)
  • Custom CSS targeting the specific section: Set both margin-top: 0; and padding-top: 0; on the section’s class or ID
  • Alternative approach: Insert CSS code in theme.liquid file before the </body> tag

Resolution:

The issue was successfully resolved using one of the CSS solutions. The user adjusted the padding to 10px instead of 0px to prevent cutting off part of an image, achieving the desired appearance.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have added a section to my store locator page, but it appears that the section is not displaying tightly below my header, resulting in the background color showing. How can I remove this space? I tried changing the background color but that does it for the whole page/site.

Here is the link to my store: https://xwdklk47z9o7r507-62631641145.shopifypreview.com

md249_0-1684243047931.png
md249_0-1684243047931.png1586×358 243 KB

2

@md249 add below css into theme.css file

@media (min-width:750px)
{
.main-content {
    padding-top: 0px !important;
}
}

Ujjaval_0-1684243877891.png
Ujjaval_0-1684243877891.png1582×734 156 KB

3
  1. In the theme editor, look for the section or block that contains your store locator page.
  2. Identify the CSS class or ID associated with that section or block.
  3. Once you’ve identified the class or ID, you can add custom CSS code to adjust the spacing. Here’s an example:
/* Replace ".your-section-class" with the actual class or ID of your section */
.your-section-class {
  margin-top: 0; /* Set the top margin to 0 to remove the space */
  padding-top: 0; /* Set the top padding to 0 to remove the space */
}
​
4

Hi @md249 ,

This is Henry at PageFly - Shopify Advanced Page Builder app.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyHenry_0-1684253928028.png
PageFlyHenry_0-1684253928028.png1600×794 139 KB

PageFlyHenry_1-1684253928032.png
PageFlyHenry_1-1684253928032.png1600×777 197 KB

Hope this answer helps.

Best regards,

Henry | PageFly

5

Great, that worked! I increased the padding to 10px because it was cutting off some of the image, but it now looks good!