How to adjust image size on mobile view

MichelleFourie
Tourist
7 0 1

Hi, 

My images look perfectly fine on desktop view, but the moment I switch over to mobile view it enlarges/crops the image. Does anyone know how to make the images responsive for desktop and mobile view?

Or just so that it views correct on both screens?    

 

Screenshot 2024-05-06 at 16.27.54.png

Screenshot 2024-05-06 at 16.28.22.png

Screenshot 2024-05-06 at 16.28.43.png

Screenshot 2024-05-06 at 16.29.19.png

Replies 6 (6)

zack_dev
Shopify Partner
75 14 10

Hi the images will become too small for mobile with current resolution so in order to preserve height it is currently zooming the image . 

You can try to make 2 image versions on sections that will require code changes to section or you could set the object-fit:contain; to css for the images it will not zoom and display images in desktop aspect ratio.



- Helpful? Like or Accept solution, - Buy me Coffee


-

Contact me

MichelleFourie
Tourist
7 0 1

Hi, thanks so much! My knowledge on coding is very limited, do you perhaps have the code that I need to insert or know where I can get it?

Made4uo-Ribe
Shopify Partner
6451 1547 1918

Hi @MichelleFourie 

Can I take a look, would you mind to share your store URL? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
MichelleFourie
Tourist
7 0 1

PageFly-Noah
Shopify Partner
1283 227 260

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

MichelleFourie
Tourist
7 0 1

Hi Noah,

Thanks so much! 
https://e0a2ee-29.myshopify.com/