Alternate product image thumbnails not showing in mobile

Alternate product image thumbnails not showing in mobile

Cindy_SW
Shopify Partner
3 1 0

Hi I'm having trouble fixing an image viewing problem in my product pages. 

 

 

URL is : cocooninglove.com  (on any product page )

 

The product media slider is not showing under 768 px wide mobile view. See attached images

I've checked on a wider mobile mobile device, such as an Ipad, and everything looks fine. 

 

 

thanks in advance for your help !

 

Screen Shot 2024-10-18 at 4.39.49 PM.pngScreen Shot 2024-10-18 at 4.39.26 PM.png

 

Reply 1 (1)

DaisyVo
Shopify Partner
4402 488 582

Hi @Cindy_SW 

The issue with the product media slider not showing under 768px wide on mobile devices likely stems from a CSS rule or JavaScript condition hiding or disabling the slider for smaller screens. Here's how you can fix it:

1- Check CSS:

  • Go to Online Store > Themes > Actions > Edit Code.
  • Open the theme.css or theme.scss.liquid file: https://prnt.sc/WEF8B80zrNMI
  • Look for rules targeting .product-media or related classes and ensure they aren’t set to display: none; or visibility: hidden; under 768px width. Adjust to make the slider visible.

2- Check Javascript:

  • Inspect Assets for a file controlling the slider, such as product.js.
  • Look for viewport conditionals disabling the slider under a certain width and adjust accordingly.

3- Test Changes:

  • Use the Shopify theme preview to ensure the slider is visible on smaller screens after adjustments.

For further debugging, inspect the page using developer tools to identify hidden elements or layout issues.

 

If you have other questions, I am willing to answer them more.

 

Best regards,

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution