remove white space

Solved
MagnusE
Excursionist
23 0 1

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

 

0 Likes
suyash1
Shopify Partner
2885 308 476

@MagnusE - I see it like this 

 

suyash1_0-1620525568997.png

 

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
MagnusE
Excursionist
23 0 1

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

0 Likes
alexfc
Excursionist
15 4 2

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.

0 Likes
MagnusE
Excursionist
23 0 1

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;
}

 

0 Likes
alexfc
Excursionist
15 4 2

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.

0 Likes
MagnusE
Excursionist
23 0 1

this did it, thanks a bunch! 

0 Likes