Image cut off on iPhone X Landscape Mode

Design help General
1

Hi,

I am testing my site on an iPhone X and XS, the iPhone Landscape mode is 812x375 and my top image no longer behaves the way I have set it to which is 100% width. It seems to work on all other devices just fine. Any help please.

Here is my site Read-Only: https://preview.webflow.com/preview/tariqs-ultra-awesome-project?utm_source=tariqs-ultra-awesome-project&preview=f29a009ca2c3d339e0b4ed7725d96fc9
(how to share your site Read-Only link)

2

Hi @Taz1

When in the designer, you can see the width of the viewport on the canvas. As the iphone X is so long, it’s actually displaying tablet breakpoint.

You will need to amend the tablet breakpoint so the image is 100%. You can mimic the iphoneX landscape in a few ways on your screen too to help you design…

Using Chrome Developer tools

CloudApp

Or using Webflow Designer, resize the tablet view to 812px and you can make the window very narrow. A bit hacky but I’ve found it useful while designing to approximate a device size. It’s good practice to resize the window frequently to make sure everything sits as expected.

CloudApp

Your image has exact pixels, so it’ snot responding on different screen sizes, it may be worth adding some % sizing to it to make it more responsive, or wrap it in a div so it doesn’t overhang other content.

Hope this helps! :slight_smile:

1 Like
3

Wow thank you. The only way it seems to work is if I set it to Max 30% however the issue then comes when viewing it on a tablet in portrait mode the logo is tiny. Is there a way I can set it to show a different image on tablet landscape and tablet portrait?

Or is there a way I can say if screen is 414 px show another image?

Thanks

4

Hi @Taz1

Try this, it should solve the issue you’re having :crossed_fingers: :smiley:

CloudApp

Let me know how you get on! :slight_smile:

Welcome to the community by the way!!! :wave: :tada: :smiley:

1 Like
5

Mark you are a genius! Thank you so much for taking out the time and effort to help me with that. It is greatly appreciated. It’s my first project in Webflow and I have never created a website in my life. It’s been so enjoyable so far and the support from people like yourself is so underrated. Thanks again!

1 Like
6

I’m so glad it’s helped! :grinning: you are most welcome! :pray:t2:

The forums are a great place to get help and advice, I started out here too learning lots so it’s great to be able to give back.

If you have any more issues, please don’t hesitate to reach out, there are always plenty of users on hand to help.

Good luck with the project! :grinning::webflow_heart: