Streaming live at 10am (PST)

Homepage images are stretched on mobile without clear reason

#1

I’m running into some final issues on the new website I’m launching. I’m trying to make the projects on the homepages perfect squares on mobile, and looking at it in webflow it seems correct. However, if I publish my website and take a look at it on my mobile phone (Iphone 7), it looks stretched, like in the image below.

I’ve checked all the elements but can’t seem to find the issue. Can anyone see where the issue is?

Preview link:

https://preview.webflow.com/preview/reach-7c1403?utm_source=reach-7c1403&preview=ed834e396cc5b926f25fd74da6c3ab34

Website: www.reachanimation.com

#2

It’s because for the other ones you have a background image set for the link block which will never stretch but that particular link, you have an image in there which has a height and width set which will stretch it.

#3

Hi @DFink, I checked all the images but don’t see what you mean. Can you perhaps send a screenshot so it’s clear for me?

#4

It seems to now be even more messed up actually…

#5

@Jorik - This could be related to using a grid in this case. Sometimes it’s best to copy your element(s) to a blank page, with no interactions, to test design options and work out issues. You might consider laying out those elements with flexbox since it looks like a simple grid. I don’t have the time at the moment to be more helpful.

#6

I think I fixed it! Thanks for your help!