▼
Streaming live at 10am (PST)

Issue with mobile responsiveness not matching Designer

#1

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

IMG_3573.PNG750x1334 324 KB

#2

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. :sunglasses:

#3

Hi @VladimirVitaliyevich

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

#4

Here's an error I have found. :wink:

Screen Shot 2016-07-12 at 14.02.45.png2560x1816 1.1 MB

#5

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!

closed #6

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