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
2234 346 962

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.

PageFly - TOP5 in the Shopify app store. Learn More.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
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
2234 346 962

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;
}
}
PageFly - TOP5 in the Shopify app store. Learn More.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
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
2234 346 962

@SweetTamarind  Thank you for the update.

PageFly - TOP5 in the Shopify app store. Learn More.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
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
2234 346 962

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

PageFly - TOP5 in the Shopify app store. Learn More.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
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;
    }
}