My photos are beig squashed on mobile view instead of resizing to appropriate width/height for mobile screen. Is there anything I can do or any code I can add to fix this? It looks horrible in mobile view so I would appreciate any help please...
you can look at my website here www.vincenzacoffee.com.au eg go to the About Us Page and you can see what I mean with the image up the top.
I'm Alex, with the Shopify team!
I see! I've been to visit your site and I'm seeing that issue as well - it looks like that image is responsive in terms of width, but not in height, resulting in a deformed result on a reduced width screen. An issue like this is likely stemming from either the theme that you're using, or from HTML in that page causing issues with the image being resized.
The first thing I'd suggest checking is making sure that there isn't any custom HMTL in that page that might be restricting the image from resizing properly. Head to that page and open the editor in your admin at Online Store > Pages, and click on the HTML view button, like so:
Once in that view, look for the code that inserts that image. It should look something like this:
If you're seeing anything there that doesn't match this example, and looks like it might be restricting the size of that image, try removing that code temporarily to see if it resolves the issue for you. If not, then your best option would be to reach out to your theme's developer for help in resolving the issue. If you're using a free theme that's made and supported by Shopify, just reach out to us and we'll be able to help! If that's a paid theme created by a third party developer, then your best recourse is to reach out to them directly for assistance.
Hope that's helped! Please feel free to let me know, and you can always give us a call or start a live chat at any time. We're open 24/7 for your convenience and always happy to assist!
Alex | Shopify
Thanks so much Alex... yes there was a height and width set up in the code which must of been causing the problem. I have removed these and now the images are appearing too big but they are resizing correctly on mobile, so I will just have to resize the images outside of my site and then re-insert them into my website at the size I want. This process is going to be a little annoying but at least it will fix the problem.
Thanks so much for your help and quick response to my problem, it was truly appreciated!
Hi again, Gemma!
No problem at all, I'm so glad that I could help! You can also resize that image within the rich text editor on your page view; click directly on the image, and you'll see it become highlighted. You can choose from some sizes there - when you've clicked on an image, the button usually used for inserting images becomes an edit image button. If you click on that once your image is highlighted, you'll see these options:
If you think you might like to experiment with some of these settings, I'd highly recommend duplicating the page and testing out on a hidden copy beforehand; this will keep customers from seeing rapid changes on your site if they happen to be visiting, and will make it easier to revert any changes if you see unexpected results!
Alex | Shopify