White space between header & page

Shopify Discussion

Topic summary

Main issue: Unwanted white space appears between the header and page content on a Shopify collections page; requester wants a fix that can be reused across sites.

Proposed fixes (CSS-based):

  • Add to a CSS file: .page-width h1.title { margin-top: 0; } to remove top margin on the page title.
  • Insert into theme.liquid (before ): #shopify-section-template–17563483963627__main h1.title.title–primary { margin-top: unset !important; } to override spacing for the specific section.
  • Another reply suggests adding code above , but the actual code snippet isn’t visible in the post; a screenshot shows the spacing removed.

Notes and context:

  • CSS = styling rules; theme.liquid is the main layout file in Shopify themes.
  • Selectors and placement differ (global CSS vs. inline style vs. section-specific). Ensure correct syntax (e.g., margin-top, not “margin- top”) and consider putting the rule in the global stylesheet for reuse across sites.

Outcome: Original poster thanked responders, implying the issue was resolved. No single “official” root cause identified; solution centers on adjusting the H1 title’s top margin. Discussion appears closed.

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

Hi

I need help, I have this white space between the header and page. how can I remove it?

I want to know the problem because I also have it another website I am working on so I want to know how to permanently remove it from different websites.

link is: https://stitchesdxb.ae/collections

helpx11.jpg
helpx11.jpg3200Ă—1572 211 KB

1 Like
2

@stitchesdxb can you please put this code in css file :

.page-width h1.title {
    margin-top: 0;
}

ProtoMan44_0-1724243005419.png
ProtoMan44_0-1724243005419.png1345Ă—588 489 KB

3

Hello @stitchesdxb

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

#shopify-section-template--17563483963627__main h1.title.title--primary { margin-top: unset !important; }

niraj_patel_0-1724243032421.png
niraj_patel_0-1724243032421.png1196Ă—582 464 KB

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

4

Hi @stitchesdxb ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1724243320146.png
BSSCommerceHDL_0-1724243320146.png1896Ă—869 219 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
5

Thank you

1 Like
6

@stitchesdxb , No problem. Have a good day :heart_eyes: