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.
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.
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:
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:
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:
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.
How you do you handle this responsive hell? I’ve moved stuff in the wrong places in WF editor until they got to the point I wanted when checking on phone, but I doubt it’s the way to go, such a fragile feeling …I guess coding knowledge would help but I got none of that here…
…I guess coding knowledge would help but I got none of that here…