[HELP] Removing blank space on Debut theme?

New Member
1 0 1

Hey forum! Would love some help here. I'm trying to figure out what in theme.scss.liquid file would I need to change to remove these blank spaces. I've already added a line that has stripped some padding off the bottom, but as you can see there is still space at the top, as well as a large white space between the heading and following section.

If anyone here might be able to help, I would be in deep gratitute. Thank you in advanced!

 

1 Like
Community Manager
Community Manager
97 0 19

Hey Mark,

David here, Shopify Guru!

To make these changes to the header you can add the following lines of code to the bottom of your theme.scss.liquid file. This first code snippet removes the black space above your header by setting the padding-top to 0.

.site-header {

  @include media-query($medium-up) {
    &.logo--center {
      padding-top: 0px;
    }
  }
}

The second code snippet is a bit more interesting because the blank white space below your logo is still part of the header section and is where the menu navigation would be displayed.

So to remove this whitespace you can add the following code snippet, bearing in mind that if you add a menu below the navigation it will have no padding and will not look as good.

.site-nav {
  position: relative;
  padding: 0;
  text-align: center;
  margin: 0;
}

If you do decide to add the menu in here you could play around with the padding and margin so it displays the way you'd like it to. We have more information on how to add a menu to the Debut theme here.

Hope that helps, feel free to drop us a line at support@shopify.com if you have any other questions. :)

Cheers,

David Mc | Shopify Guru

1 Like
Highlighted

For the space directly below the header in Debut -

 

Edit theme code:

Open theme.scss.liquid (in Assets),

Paste this code:

/*=====Remove White Space Below Debut Header====*/
.main-content {padding-top:0px;}

at bottom....

Save

Take a look.

WaterBottleShop.Online
https://waterbottleshop.online
0 Likes
Shopify Partner
84 16 20

Hello @mark_deida 

 

You need to add below CSS code at bottom of your theme:

theme.scss.liquid  in Assets

Paste this code:

.main-content {padding-top:0px!important;}

 

Best Regards
Parth Bhut

............................................................................................................................

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: parth.bhut143@outlook.com [This is my PAYPAL too:) ]
Skype: parthbhut7

0 Likes

What does the :  

 

!important;}

part do? 

WaterBottleShop.Online
https://waterbottleshop.online
0 Likes