Elongated Grid Images

Can anyone tell me why many of my grid images appear elongated on my iphone even though they look perfectly fine in the the Webflow Designer?


https://preview.webflow.com/preview/chriss-fabulous-project-aee151?utm_medium=preview_link&utm_source=designer&utm_content=chriss-fabulous-project-aee151&preview=9c9f3f23e843f686a66a8d3100953552&workflow=preview

Published Link: https://chriss-fabulous-project-aee151.webflow.io/

Hello Chris,

Couple things. Could you provide the published link, and when you say it’s incorrect on your iPhone is it just portrait or both portrait and landscape? I’m still learning, but I will see if it’s something I can help you with. :pray:t3:

I’ve added the published link, which is: https://chriss-fabulous-project-aee151.webflow.io/

Hi Chris,

This one is hard for me to diagnose because it requires me to publish which is not allowed.

What I would try is expanding your grid rows from 3 to 6 to match your content. Not sure if this is the fix, but why not.

Also, you’re using super large images for your thumbnails. Some have a height of 2550px. What I would do is create small thumbnails that link to properly sized images for the lightbox.

Aspect ratios and how it relates to how it works on the web can be cumbersome at times. Also, to resize your file sizes, this tool is great: www.squoosh.app. Convert your jpgs to webp for a significant boost in SEO, page speeds, and data usage.

These are some suggestions and when I get back home I will see if I can do some more experimentation. :slight_smile: