Adjusting the space between header and other sections on debut theme

Technical Q&A

Topic summary

Main issue: An excessive gap under the header in the Shopify Debut theme.

What was tried (unsuccessful):

  • Adding CSS in theme.scss.liquid to set .main-content { padding-top: 0; }.
  • Adding inline CSS before to set .gemapp .site-footer { margin-top: 0 !important; }.

Troubleshooting steps:

  • Helper requested the store URL; the owner shared it.
  • Recommendation to remove extra whitespace around the logo image, as it was inflating header space.
  • Instruction to edit theme.liquid and paste a code snippet immediately below the tag to eliminate the extra space. The exact code isn’t visible in the text, but screenshots were provided to indicate placement.

Outcome:

  • The changes resolved the spacing issue.

Status: Resolved. Screenshots/attachments were central for understanding code placement and the logo whitespace issue.

Summarized with AI on January 5. AI used: gpt-5.
1

Hello,

I am looking for some help with my debut theme, the gap under my header and the below section is slowly killing me, I tried everything that was suggested in some other discusions and nothing seems to work. :disappointed_face: Maybe someone can help me out?

I have tried the following and it doesn’t work:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.main-content {padding-top: 0;}

Copy

Please follow these steps below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.liquid->paste the code below before tag:
<style>
.gemapp .site-footer {margin-top: 0!important;}
</style>

I would be very thankful to anyone that has any suggestions.

2

Hey @24Chick ,

Can you share the link to your store?

3

https://www.24chick.com/

4

Hey @24Chick ,

A little suggestion: You should remove all whitespace on the logo, this takes up space on the header unnecessarily.

ThePrimeWeb_0-1707573433524.png
ThePrimeWeb_0-1707573433524.png631×398 25.9 KB

To get rid of the space, follow these instructions

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_1-1707573568436.jpeg
ThePrimeWeb_1-1707573568436.jpeg1253×933 87.9 KB

1 Like
5

Omg, that worked! :blush: Thank you so much for the help!!!