Removing white space (padding) under header in Debut theme

Technical Q&A
1

Hi, I’m hoping someone can figure out how to remove this white gap below the header.
I’ve tried a lot of methods in different threads, but had no success. My theme file is .css, not .scss
My website is www.checkoutfirst.com

padding.jpg
padding.jpg1482×2280 280 KB

thank you!!

1 Like
2

@checkoutfirst

Welcome to the Shopify community!
Thanks for your good question.

kindly share your store URL, so that
I will check out the issue and provide a solution.

3

www.checkoutfirst.com

1 Like
4 
@media only screen and (min-width: 600px) {
.index-section--flush:first-child {
    margin-top: -50px !important;
}
}

@checkoutfirst
Add this code in the bottom of the theme.css file and save it.
Thank you

5

This didn’t work

6 
@media only screen and (min-width: 750px) {
.hero--x-small {
  height: 94px;
  margin-top: -48px !important;
  }

}

@checkoutfirst
Add this

7

Go to theme.css

Fine the class name “.main-content”

remove the padding -top: 35px;

8

@checkoutfirst

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme**.css** and paste this at the bottom of the file:
@media screen and (max-width: 749px){
    #PageContainer {
        padding-top: 53px !important;
    }   
}

Thanks!