Issue with mobile responsiveness not matching Designer

[Finsweet (Communications at Finsweet)]

Hello,

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.

Thanks,

Joe

[coolest_vlad (Vlad Radchenko)]

Try to look at any of your parent or child elements that might have a fixed width that you forgot to change.

Hope this helps.

[Finsweet (Communications at Finsweet)]

Hi @VladimirVitaliyevich

I couldn’t find any parent or child elements that are getting in the way. Thanks for the response!

[coolest_vlad (Vlad Radchenko)]

Here’s an error I have found.

[Finsweet (Communications at Finsweet)]

Thank you. I saw this earlier and changed it to auto (and even to 0px). It did not fix anything, so I left it at 400px. I tried it again just now and still didn’t fix it.

As I was playing around on the site, I noticed that the canvas wrapper was set to min-width: auto. Must have entered it by mistake as I was building out the site. I changed that min-width to 100% and it fixed the problem.

Thanks for your help. It ended up leading me to the solution!