Streaming live at 10am (PST)

Correct display in mobile

Hi!

I have 2 questions on the correct display of my site in mobile.

  1. In the mobile iPhone X landscape, the site accepts tablet settings:


I want the site to display as shown here:


Does this mean that already in the “tablet” I have to set the parameters that are now for the mobile landscape?

  1. How to get rid of “torn” site loading on a mobile? On the desktop, the appearance is smooth, but on the mobile, the text “jumps”. It seems to me that the image affects. But I don’t know how to properly configure the interaction so that the mobile site loading is normal.
    Load Desktop
    Load Mobile

Here is my site Read-Only: https://preview.webflow.com/preview/lovko?utm_medium=preview_link&utm_source=designer&utm_content=lovko&preview=8a6e223e6dcdc52eeffd5677e7212c79&mode=preview

Hello @Liliya_Dubnyuk,

I had a similar problem on one of my projects. The iPhone X and above will just always display the tablet breakpoints when position on landscape. However, the solution I found so that my site works on all devices was to set my containers heights to auto even if they were on different units before. So if you want your site to display the way you want it, set your home hero section height to auto and check the published site on different phones and devices. On my case it worked on the iPhone x and above landscape mode with a tablet look, and on the iPhone 8 and below on the normal mobile landscape view. As for the interactions(site loading), you have to change it a bit for mobile once you resize the containers so it works the way you want. Please let me know if this was of any help for you or if you find another solution. Take care.

Thanks for your reply.

But, unfortunately, the solution is hardly suitable. I specially set the height to 100vh for the first screen, and the design is crashing on the “auto”.

Everything breaks down in one place - it’s on landscape phones with a size of 814 px (like iPhone X)

About nteractions (site loading). I didn’t understand how to change interactions for tablet and mobile here.

@Liliya_Dubnyuk,

So I went through the same issue that you are having now. So, once you change to auto you have to make some changes to your layout to make it look like you want. Since iPhoneX is going to use the tablet mode view on landscape if you use 100vh for the height the hero image is not going to look the same on a very short landscape vh, so using auto you can then control how much the users sees on landscape maybe change it to pixels, it is kind of a trial and error until you achieve what you want on all devices. So for interactions you have to disable that load animation on mobile, and create a new one that works better with the size adjustment. You can do that on the trigger settings. I hope this helps.
02%20PM