Reduce blank space between images and Thumbnails in mobile view

Shopify Discussion
1

Hi. I am using Sense Theme 15.0.0. Would anyone be able to guide me how to reduce the gap between the main image and thumbnails on Mobile View? It doesnt look nice with the standard spacing provided and if I can reduce that, can bring more content above the fold which can be useful to build visitors interest. Thanks and wish all a great day ahead.

1 Like
2

Hi @SharadM

Could you share your store URL to check?

3

Hi @SharadM

Would you mind to share your store URL? Thanks!

4

Hi, thanks for the help. The product page is https://3670online.com/products/premium-cotton-polo-t-shirt

5

Hi, thanks for the help. The product page is https://3670online.com/products/premium-cotton-polo-t-shirt

6

Thanks for the info, do you like to reduce or take it out?

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
@media screen and (max-width: 749px) {
    .slider.slider--mobile .slider__slide {
        padding-bottom: 0px !important;
    }
}

@media screen and (max-width: 749px) {
    .slider.slider--mobile .slider__slide {
        padding-bottom: 0px;
    }
    .slider.slider--mobile  {
        margin-bottom: 0px;
    }
    .thumbnail-slider .thumbnail-list.slider {
        padding-top: 1px;
    }
}
1 Like
7

Wow, thanks let me check it out. I think reduce would be better. I will do what you say and get back in few minutes.

8

I did that, works beautiful thanks so much. One request, can i also reduce the font size of the Title a little, if i cold slightly move the content below the title up a little then the color selector swatches i have the first line will be fully visible above the fold, right now its a little cut off. Thanks once again, I was struggling with this for last couple of days.