Product Page not displaying product images on mobile

Solved
SweetTamarind
Tourist
10 2 5

Hello! The individual product pages on my site do not display the product images or the "BUY NOW" button. I haven't been able to find a solution here. Can anyone help me?

A mobile viewA mobile viewPC/ Tablet ViewPC/ Tablet View

0 Likes
HardikDavra
Shopify Partner
1870 296 813

Hello, @SweetTamarind 

Welcome to the shopify Community.
I read your problem and it seems that I need to analyze your website to provide solution here.
Would you please share your website URL and if your website is password protected then also provide password.

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
SweetTamarind
Tourist
10 2 5

Hello paramSoft. Thanks for your response!

This is my website: https://gamergrillslvlup.com/products/angry-bear-bluetooth-headset

password: crauba

HardikDavra
Shopify Partner
1870 296 813

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

@media only screen and (max-width: 600px) {
.product-single__media-group  {
display: block !important;
}
.product-single__media-flex-wrapper {
width: 100% !important;
}
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
SweetTamarind
Tourist
10 2 5

They are displaying now, but there seems to be a lot of padding or space between the images. I'll have to scroll through several empty slides in order to get to the main image. Some of the images take up 2 slides, though I do not mind that part. Also, I really appreciate your help. Thanks paramSoft.

HardikDavra
Shopify Partner
1870 296 813

@SweetTamarind  Thank you for the update.

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
SweetTamarind
Tourist
10 2 5

The issue isn't really resolved. Are you still willing to help me? The images are technically displaying, but you have to scroll through empty slides in order to see a portion of the image. How do I get rid of these empty slides? A user may not even realize that they need to scroll in order to get to an image, they'll likely just think there's no image, refresh a few times then leave.

I have circled the number of empty slides I had to scroll through before seeing an imageI have circled the number of empty slides I had to scroll through before seeing an image

HardikDavra
Shopify Partner
1870 296 813

This is an accepted solution.

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and remove the selected code which I displayed in below screenshot.
Screenshot (4).png

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
SweetTamarind
Tourist
10 2 5

This is an accepted solution.

For clarity, the final solution is: 

 

@media only screen and (max-width: 600px) {
    .product-single__media-group  {
        display: block !important;
    }
}