I need help removing the white space and the unnecessary scroll bar toward the top of my home page.

New Member
1 0 0

I need help removing the white space and the unnecessary scroll bar toward the top of my home page.

It's between the header and the picture of the man wearing a watch. If someone could take a look at this and let me know what to do, I would greatly appreciate it. I've gone through a handful of other forums that I thought would fix it with the padding codes but nothing has worked so far.

http://wackywatchesonline.com

0 Likes
Highlighted

Hello Nathan,

The simplest way to remove the white space is:

1.From your Shopify admin, go to Online Store > Themes (In this example I have managed Debut theme).
2. Choose "Edit code" from the "Actions" drop-down menu.
3. On the Edit HTML/CSS page, you can edit the Assets / theme.scss.liquid file.
You should find the following lines in the file (the code is about 1212 line):

.main-content {
 display: block;
 padding-top: $section-spacing-small;

 @include media-query($medium-up) {
  padding-top: $section-spacing;
 }
}

Add new line after this code:

.template-index .main-content {padding-top: 0px;} //custom css

2nd. Find the following lines in the file:

.template-index .index-section {
  padding-bottom: 20px;
}

Add new line on this code:

.template-index .index-section {
  padding-bottom: 20px;
  padding-top: 0; //new line that remove paddings
}

If you haven't found these lines, just add them to the end of your theme.scss.liquid. They will then look like this:
 

.template-index .main-content {padding-top: 0px;} //custom css
.template-index .index-section {padding-top: 0; //new line that remove paddings}

In general, you should test changes in a theme copy first vs editing the live theme (unless you are really sure you know it will work). Duplicate the theme and test things in the copy.

I hope it helps.

Best,
Arthur

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
0 Likes