A space to discuss online store customization, theme development, and Liquid templating.
Hello everyone,
I'm reaching out to the community to find a solution for an issue that likely affects many of us. It concerns the display of product images on mobile devices. Specifically, my issue is that when opened on a phone, the images enlarge excessively and spill over the edges of the screen format.
Has anyone here encountered this problem and knows how to adjust the size of the images so that they fit perfectly within the format of the mobile device, without going over the edges? Are there perhaps special tools or settings in the system that can be used for this purpose?
I'm grateful for any tips or instructions that can help improve the user experience on mobile devices. The goal is for the product images to automatically adjust and remain fully within the user's view without the need for manual zooming or scrolling to see the image in full size.
Looking forward to your suggestions and discussions.
Solved! Go to the solution
This is an accepted solution.
Hey @Molodetz
Web.dev have a great write up on a bunch of techniques here: https://web.dev/learn/design/responsive-images
Scott | Developer Advocate @ Shopify
This is an accepted solution.
Hey @Molodetz
Web.dev have a great write up on a bunch of techniques here: https://web.dev/learn/design/responsive-images
Scott | Developer Advocate @ Shopify
thanks a lot. It has been incredibly helpful and provided me with a clearer understanding of the steps I need to take. However, due to my limited knowledge and to avoid tampering too much with the website's code, I've decided it would be best to enlist the assistance of an expert for such tasks. This way, I can ensure that everything is handled correctly and efficiently. Thank you once again for your valuable advice and support.