Scaling Not Proportionally

I am having issues scaling the app screen (called screen3) in proportion to the iphone mock between the iphone 5 and 6 (320px and 375px), respectively.

For some reason, the app screen (screen3) doesn’t start to shrink until the mobile screen size is reduced to 333px, whereas the iphone mock reduces as the mobile screen size is reduced (how it should be). I have attached some images for reference.


Here is my public share link: https://preview.webflow.com/preview/cradle?preview=a045ca2b5fdb1840aa0ef044d518a545

Hi @Gary_Liu great question!

It looks like you need to set your “IphoneMock” to position relative for your landscape viewport and down.

Then for the content in the phone, try using a percentage based top styling and width to make it adjust responsively, as well as adjust the top/bottom padding to a percentage based padding for the “Case” style. :smiley:

Hi Waldo - thank you for your response.

I have played with giving an absolute value to the screen using the top setting as well as giving a 1% left/right/top/bottom margin. The issue is that although it shrinks responsively, it’s still a little off in either the iphone 5 viewport or 6 viewport (i can’t get both to look perfect). Check the photo below for a case where it looks great in 5 but not in 6.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.