How can I eliminate unwanted gaps on my mobile website version?

Store Design
1

Hi guys,

I feel like my mobile version of the website is full off unneeded gaps that only need to make people scroll more. With help of this awesome community I got rid of most of them but after working with the smart tabs I found one last one.

This gap is between the smart tabs / product and the related products below that. I actually want that gap gone so it looks like the rest of the website. The screenshot is on mobile but I wouldnt mind if the gap on the desktop version got smaller too.

Screenshot_20210818-164833_Chrome.jpg
Screenshot_20210818-164833_Chrome.jpg1080×1211 60.7 KB

If they see the related products sooner they might buy more!

Thanks again!

2 
section.single product {
      padding-bottom: 0px !important;
}

Hey!

Try this and see if it works

This should reduce some of the space between the smart tabs and recommended products.

It will go in your theme.css file.

Hope this helps!

3

Thanks but it doesn’t seem to work! :disappointed_face:

4

Does anyone else have a solution? It looks like simple CSS but I don’t know how to do it!

(I really need to learn CSS)

5

hello @MDKSocks

can you please share your page URL of gap that needs to go away

6

Hey thanks for your response!

It is basically every product page, like thise one: https://mdksocks.nl/collections/sneaker/products/stark-soul-sneakersokken-vrolijke-kleuren-5-pack

It looks allright on desktop but the gap on mobile is way to big. I wouldnt mind the gap on desktop be a little smaller tho I guess (not sure)

7

Man this topics really go out of sight pretty quickly

Did you find a solution maybe? @Kinjaldavra

8

Does anyone have a fix for this? I know it is simple, but I just can’t do it myself…

@Kinjaldavra maybe? You would be my hero!

9 
@media only screen and (max-width: 749px) {
.product-block-container {
    margin-top: -113px !important;
}
}

@MDKSocks
Paste this code in theme.scss

10

Hey thanks! This seemed to work but it this remove the line there was before! Not the end of the world tho…

Is it possible to get that back maybe? @Zworthkey

11

Remove the code where you have pasted

12

Yeah I can do that, but then the gap is back. I remove it for now if you wanna look at it!

13

hello @MDKSocks

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 750px){
     .template-product .single-product{
      padding: 0 18px 0px;
  } 
  .template-product  .single-product .smart-tabs-static-content{
    display:none;
 }
 }
1 Like
14

Thank you!!! Perfection!