How to eliminate unwanted white space on a webpage?

[MagnusE]

Hi! 

Want to remove this white space that appear between the menu and the image (see image below). Website: http://us.dbrisshoes.com/ the site can only be views from the USA. Any ideas? Thanks in advance! 

[suyash1]

@MagnusE - I see it like this 

[MagnusE]

Yes , only work in the US or you will be redirected to our main site which looks as it should 🙂 

[alexfc]

Hi,

The gap is due to padding applied in the CSS file (timber.scss.css), which you can locate in your theme under the assets folder.

In line 306 more or less, you will find this code:

body:not(.template-index) .main-content {
  padding-top: 30px; }
@media screen and (min-width: 769px) {
  body:not(.template-index) .main-content {
    padding-top: 80px; } }
@media screen and (min-width: 591px) {
  .main-content {
    padding-bottom: 40px; } }

Just change the padding-top values to 0 like this:

body:not(.template-index) .main-content {
  padding-top: 0; }
@media screen and (min-width: 769px) {
  body:not(.template-index) .main-content {
    padding-top: 0; } }
@media screen and (min-width: 591px) {
  .main-content {
    padding-bottom: 40px; } }

As you can see, there is also a padding-bottom rule that adds a gap of 40px

Hope this helps.

[MagnusE]

Thanks Alexfc,

This is what the code was in the timber-file:

.main-content {
  display: block;

  // to be kept before Sections Everywhere
  body:not(.template-index) & {
    padding-top: $gutter;

    @include at-query($min, $large) {
      padding-top: $contentTopMargin;
    }
  }

  @include at-query($min, $postSmall) {
    padding-bottom: 40px;
  }
}

If I changed all of them to 0 the front page looked as a wished, however I still want to keep the padding on other pages.

I've also tried with the following code in theme.scss.liquid file, it made no difference. Any other ideas? 

#shopify-section-slideshow{
  padding-top: 0px!important;
}

[alexfc · Accepted solution]

What about this  adding this code to theme.scss.liquid, I think the DIV index-sections only applies to the home page:

.index-sections {
  margin-top: -30px;

  @media screen and (min-width: 769px) {
    margin-top: -80px
  }

}

 
If this doesn't work, send me a PM and I can check the theme for you.

[MagnusE]

this did it, thanks a bunch!