Online phone viewport doesn't match actual phone webpage

I’ve encountered a persistent issue that I’m hoping to get some insights on. When designing and previewing my website in Webflow’s phone viewport, everything appears as intended. However, when I test the site on an actual mobile device, the display doesn’t match what I see in Webflow’s preview. This discrepancy is making it difficult to ensure a consistent user experience across devices.

Additionally, there’s an unexpected behavior with the bottom bar on mobile browsers. Despite designing for a vertical scroll, the bottom bar seems to initiate a horizontal scroll. This not only affects the visual appeal but also the site’s usability on mobile devices.

Has anyone else faced these issues? I’m looking for advice on how to:

  1. Align the Webflow phone viewport preview more closely with the actual display on mobile devices.
  2. Prevent the bottom bar from causing horizontal scrolling on the website when viewed on a phone.

Any tips, tricks, or insights would be greatly appreciated. Thank you in advance for your help and support!

here is my website link to view from your phone: OASIS

and I’ve also left a picture and my read only link below.


Here is my site Read-Only: https://preview.webflow.com/preview/andres-portfolio-e355d4?utm_medium=preview_link&utm_source=designer&utm_content=andres-portfolio-e355d4&preview=43648fcfee9889d28e69e1e764baa1ef&pageId=65bd81dd7f5edc2f323befb8&workflow=preview
(how to share your site Read-Only link)

It’s hard to say at first glance, but it could be hard px values. Maybe try using a 100% for certain elements so its based in the viewport width. Also check for left/right padding. This may cause content to overflow, creating horizontal scroll.