How do people serve webflow sites to mobiles which all have LARGE screen resolutions nowadays & thus always load the desktop breakpoint display?

Hi,

I don’t get why this feature is so outdated, but Webflow has mobile device breakpoint sizes which were relevant back when the iPhone 3GS was released in 2007. (iPhone 3GS screen res’ = 480×320 pixels)

So how do you guys make mobiles with typical resolutions today load any of the smaller Webflow breakpoint sizes?

Somebody must have found a simple solution for this?

rsvp
cheers


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Breakpoints are hard coded and it is likely that webflow is stuck with them for backwards compatibility reasons unless they come up with new breakpoints (modern) that can be enabled on a site by site basis.

It is possible to use custom code to trigger the mobile menu on 1024, for example, but animations are locked in to the current defaults from what I can see. Honestly when I need a design with custom breakpoints I don’t build on Webflow. Hopefully that is not the case forever.

Hey, Max. Your question actually got me thinking and I went to do some digging. To be clear first off, a mobile device, even a modern one, will not load a desktop-sized breakpoint. This is expected behavior, and it works well, but I never considered why it actually works, because you are correct in asking why an iPhone 13 mini (as example) doesn’t load the desktop breakpoint if the screen resolution is 1080x2340.

Thankfully, I found somewhat of an explanation right here on the forums. I’ll paste a little of it below, but I recommend checking out the whole post here.

Hope this helps clear things up a bit.

1 Like

hi, thanks for the reply Chris

Blimey!! it does!!! on my mobile it does show me the mobile view & on my iPad i get the tablet view!!!

EPIC!!! Google has been down-ranking us for years now cos the old site is dated and not mobile compatible

it’s a shame the editor preview does NOT do this, so you assume before exporting code (or hosting via webflow) that it’s going to do what it does in the preview.

In all the pages i’ve trawled though on this topic you are the only person - including ALL the webflow official help pages & videos - who just made this simple & clear

there’s FAR too much waffle in this industry

now a few fine tweaks & get the database i/o integrated & we’ll be rocking and rolling!

it’s perhaps not a usual site project that webflow get’s used for?

cheers again mate! :+1: :heart:

1 Like

No worries! I love questions like this. Always fun to learn something new.

Would love to clarify this statement though, if that’s okay. What did you mean by this? Are you seeing differences between what’s in your designer and what’s on the published site?

hi Chris,
every time i created a preview link and then viewed it on phone/tablet it did not behave the same as an actual exported site running as raw html. I assumed therefore it was the screen resolution issue as i outlined above in my first post.

now i’m seeing the site exported as raw html it does as you say, which is fantastic. I’d simply not done an export and checked that so far.

it’d be cool if webflow had a raw html preview/check feature which takes away the editor frame

:+1:
cheers
matt

I see what you mean now. Thanks for clarifying. Thanks, Matt.

Hey Coleman, referencing your comment here:

To be clear first off, a mobile device, even a modern one, will not load a desktop-sized breakpoint.

I’m gonna challenge this - I’ve been having this issue for years. I’m currently testing on a Google Pixel 7 and when rotated sideways for mobile landscape, it’s pulling my site intended for desktop. I have yet to find a fix for this and it’s extremely hard to design for responsiveness.

So far, the closest answer I’ve gotten to this problem is custom breakpoints? But as @webdev said above: “Honestly when I need a design with custom breakpoints I don’t build on Webflow.”

Just another dead end.