Solved

remove white space

MagnusE
Excursionist
32 0 4

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! 

MagnusE_0-1620500454164.png

 

Accepted Solution (1)
alexfc
Shopify Partner
20 4 3

This is an 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.

View solution in original post

Replies 6 (6)

suyash1
Shopify Partner
9030 1123 1482

@MagnusE - I see it like this 

 

suyash1_0-1620525568997.png

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI
MagnusE
Excursionist
32 0 4

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

alexfc
Shopify Partner
20 4 3

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
Excursionist
32 0 4

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
Shopify Partner
20 4 3

This is an 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
Excursionist
32 0 4

this did it, thanks a bunch!