Streaming live at 10am (PST)

Mobile preview inaccurate and other issues

I’m in the process of finishing my website from a structural perspective and I’m having quite a few issues that I just can’t seem to get past and I’m hoping someone can show me where I’ve gone wrong.

My number one issues is when I view my website in the mobile preview, it looks perfect however on my iPhone Xs it looks nothing like the mobile preview. I have attached a screenshot below.

Browser Webflow Preivew:

iPhone Xs:

Other issues:

  1. When I scale the browser, in certain positions the nav bar with “president” “gambling” etc overlaps with the slider with the numbers (screenshot below)

  2. Page 4 (Gambling) is all over the place, can’t seem to make the heading behave like a heading and the checkboxes in the grid behave like sub-menu items. The same issue is happening on page 6 (Other).

URL: https://preview.webflow.com/preview/pjx-mini-slider-25adea484-019a01c442ec0?utm_medium=preview_link&utm_source=dashboard&utm_content=pjx-mini-slider-25adea484-019a01c442ec0&preview=bc66c0b51990e09668403097c1123adb&mode=preview

Thank you in advance!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Good morning @Boris, when you are creating on mobile, watch your VH and VW settings. That is where you will get into trouble most of the time. Also, when using neg margins as well.

Here is a little video for your viewing pleasure: https://www.loom.com/share/3fe8d74f8225481392ecc151355d045a

Happy Designing,
Brandon

@WebDev_Brandon , thank you so much for your response.

Though changing it to percentage does fix my issue, it also creates another issues as a result:

  1. The navigation arrows fall to the bottom of the screen (on top of the footer). You can see this in your video as well
  2. The “Slider Nav” element which is attached to the slider in the VH metric, also falls to the bottom of the screen which is now scrollable at an (what seems to be) 100% increase.

Any tips on how to get past this? I’ve tried changing it to Auto instead of percentage and PX but it still happens, can’t seem to figure out how to force both elements back to their usual place without going back to VH

I’ve updated the site so you can see for yourself.

Anyone able to provide some insights on this one please?

Hi @Boris, Ill take a look again. Been busy with other projects!

@Boris,

Found your issue. Has to due with the height of a slide. Watch this little video: https://cl.ly/7847f5

Happy Designing,
Brandon

@WebDev_Brandon you are amazing. Thank you so much