Debut mobile view errors for images with slider

Store Design

Topic summary

A user reported mobile view display issues on product pages, specifically:

Problem identified:

  • Large white gaps appearing between the main product image and thumbnail images
  • Additional spacing between thumbnails and slider navigation arrows
  • Overall appearance suggesting incomplete page loading

Solution provided:

Two CSS fixes were recommended and successfully implemented:

  1. First fix - Added to theme.css file:

    • Code: .product-single__media { height: auto !important; }
    • Result: Eliminated gap between main image and thumbnails

  2. Second fix - Additional CSS code:

    • Code: .product-single__thumbnails-item-slide { height: auto !Important; }
    • Result: Resolved remaining spacing issue with slider arrows

Status: Issue fully resolved. Both CSS modifications were applied to the theme.css file in the assets folder.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have issues with all of my product pages in mobile view with the way the images are displayed. There is large white gaps between the main image and the thumbnail images and then another big gap between the thumbnail images and the slider arrows making it looks like the page isn’t loading properly.

Please could I ask for a solution for this please?

My page for one of the product example is here:

https://theconsciousgardener.co.uk/products/plastic-free-gardening-gift-kit-by-the-cg-preorder

Images attached to show what I mean.

Thanks,

2

Hi @Elsie_TheCG
You can try follow this path:
Themes => edit code => asset => theme.css
and add this code to bottom of the file theme.css

.product-single__media{
height: auto!important;
}
1 Like
3

Hi Expert Rookie,

Thank you for your advice.

This has fixed the gap between image and thumbnails but not the slider which is still way down.

Image attached.

IMG_0023.PNG
IMG_0023.PNG1170×2532 319 KB

4

Hi @Elsie_TheCG
Please add this code to fix

.product-single__thumbnails-item-slide{
height: auto!Important;
}
1 Like
5

That’s great. Thank you!