I am working on a concept Dunkin Donuts site, modeled after their newish mobile app.
Here is the share link: https://preview.webflow.com/preview/finsweet133?preview=4034e371cbb1458f6cfae2af0c644643
The site looks awesome in the Designer and looks great as a Published website. All levels of responsiveness look good on desktop. However, the results don’t carry over when on a mobile device. I’ve attached a screenshot from my phone.
I can recreate the issue see in the screenshot inside the builder — .canvas-wrapper is set at 700px for desktop and tablet view, and is then moved to a 97% width on both mobile views. What you see in the attached screenshot can be recreated in the Designer by changing that 97% width back to 700px for both mobile views. Although it’s not set as 700px, that’s what it shows up as on a mobile device. Please help - I feel like I’ve tried everything.
Please note: this is a highly experimental site. I’m attempting to create a mobile-like experience on the web. I tried to keep this site as neat as possible, but it’s very much treated as a project site. Lots of unneeded classes, probably lots of extra divs, etc. Not concerned about cleaning it up / making it neat - unless of course that fixes the issue here.