▼
Streaming live at 10am (PST)

Preview mobile different than actual mobile

Community resources General
#1

I’ve seen this issue a lot around here but the fix seems to be specific to each design.

I don’t understand the point of providing a mobile preview if you can’t rely on it.
I quite new to Webflow and am struggling a lot, would appreciate some help.
Here is my read-only link : Webflow - Deb's Stupendous Project

It’s far from finished but I would like to understand why my preview differs from my actual mobile view before continuing designing.

My main issues :

  • the website is zoomed out on mobile (not on preview)
  • my grid is an actual mess, I wish I could set up a “square” grid with same size lenght/height so the ratios of my pictures would stay the same.

Thank for your help.

#2

Anyone has the slight idea how to help me move forward on those issues ?

#3

Like the one that each browser maker typically includes in dev tools?

I have six devices in front of me all day. A desktop, a laptop, an iPad, a Nexus, a S10 and an iPhone 11 pro. Why? Because the only way to get actual rendering feedback is to test on a real device. Browser based responsive views are approximations and are the previews in the designer. I also use browserstack.com to be able to debug on devices I don’t own.

If you have rendering issues on a device then share the published URL where the site can be viewed. When sharing issues it is very helpful to include screenshots so community members can see what you are talking about. All the details you share make it easier for people to help you. Personally I prefer to debug actual designs on real devices. I will try to take a look when you share your example URL’s.

#4

Is this not the published URL where the site can be viewed ?

I’m providing some screenshoots like you asked where you can figure out what I see from Webflow editor opposed to what I actually see on my mobile. You can see the “zoomed out” issue as well as the difference of ratio of my pictures displayed.

I understand that you prefer to debug on real devices but when you don’t really know what the problem is, it makes it hard to reload every time you change a setting to see what it actually did, I thought that’s what the “mobile view” was useful for, real time preview.

Thanks for taking your time to help me out.

Webflow editor :

Screenshot 2021-01-28 at 21.14.47
Screenshot 2021-01-28 at 21.14.47624×1584 184 KB
Screenshot 2021-01-28 at 21.15.00
Screenshot 2021-01-28 at 21.15.00900×1576 103 KB

Real mobile view :

Screenshot_20210128-211438_Chrome
Screenshot_20210128-211438_Chrome1080×2316 263 KB

#5

Is this not the published URL where the site can be viewed?

This is your read-only link for previewing the project in the Designer, but it does include a clue as to what the published, staging URL is for the project:

…ow.com/preview/ debs-stupendous-project-7ba3a7 ?utm_me…

The bold text above is the subdomain of your staging link, just add .webflow.io to the end of it and, as long as the project has been published, it will give you the correct link (below):

When I test your site in Chrome and enable the Device Toolbar in DevTools (defaulted to the Moto G4, but this mainly dictates the resolution), I’m presented with the same issue you’re noticing on your own device screenshot:

image
image892×1510 98.2 KB

After taking a closer look at things, it seems like the “Sticky Heading” H1 elements are the problem here:

image
image1588×664 144 KB

Adjusting their size on the smaller viewport (or giving them a container with overflow: hidden) should solve the issue :+1:

#6

Thank you, it was kindly explained and I almost thought this could be it, but unfortunately it did not work… :frowning_face:

#7

Reducing the text will definitely fix the most blatant overflowing elements, but it looks like the section directly below the one containing your Sticky Heading elements also is part of the problem. The images shift outside of the viewport with a scroll interaction, so setting their parent container (Wrapper About Image) to overflow: hidden should fix any remaining horizontal scroll:

image
image1586×918 223 KB

I quickly checked your read-only link and it looks like the parent wrapper is already set to overflow: hidden but I’m still noticing the large Sticky Heading text in the section above. It also looks like since these are elements you want to “stick”, you’ll probably need to look into another solution as sticky elements don’t play nicely when their parent elements are set to overflow: hidden.

If you adjust the sizing of the headlines and republish your project, the horizontal scrolling issue should be resolved.