Why aren't my product images displaying on mobile version?

four_seasons
Shopify Partner
3 0 0

 

I uploaded my image for mobile version on the product page.

However, It doesn't show on mobile version.

Plus, if the mobile version doesn't display the image, it should at least appear the image of desktop version as if it were the mobile version. However, when viewed in the mobile version, the photo in that section is completely missing.

Can anyone help, please?

Thanks in advance!

Replies 6 (6)

JonasS
Shopify Partner
73 8 12

hi, We need more info for question here. Your Shopify store URL at least provide here

Cobo-Sf : Your needs, our speed – Together, we succeed!
Feel free to let us know what you really want to change for your client.
four_seasons
Shopify Partner
3 0 0
JonasS
Shopify Partner
73 8 12

looks good. it's right?

 

JonasS_0-1695028025561.png

 

Cobo-Sf : Your needs, our speed – Together, we succeed!
Feel free to let us know what you really want to change for your client.
four_seasons
Shopify Partner
3 0 0

four_seasons_0-1695028285529.png

I mean this one,

This "Key Features"  image is currently shown at desktop, but not at mobile even though we uploaded "Key Features's mobile version.

JonasS
Shopify Partner
73 8 12

Generally, you must set something wrong, I suggest you compare the "We recommend to" picture settings.

Cobo-Sf : Your needs, our speed – Together, we succeed!
Feel free to let us know what you really want to change for your client.

szops
Shopify Partner
12 1 4

The lap--hide class is setting a "display: none" on the container of the image which makes it dissapear on mobile devices. The best way to solve this (but not the easiest) is to delete this class from the div -> in theme files find where this element is located and delete this class.  The easy way (but not ideal) is to add this code in base.css (in theme files) or in "custom css" inside theme configuration under theme settings:

.lap--hide:has(figure){
   display: block;
}

This code basically sets every element that has a figure and that was hidden to be visible. A tradeoff is that it does not work on firefox!!! What you can also do is add a class to your div (but again you would have to find where it is in theme files) like "visible" and in custom css (same way that I described earlier) define this class like so:

.visible {
   display: block !important;
}



Screenshot 2023-09-18 at 19.37.18.png
I know these are not the ideal solutions but I hope it will help you 🙂

Hi! If you found my answer helpful please leave a like 😄