I’d like to chime in on this old thread because out here in the real world of development I’m seeing some big issues in how breakpoints are set in webflow and I don’t agree with the theory of using the twitter bootstrap standard media queries.
For one it uses a 1200px wide screen as the default. This is probably fine in most case but actually a lot of us these days have a much wider screen.
For two, as a developer we should have the liberty of being able to devise some breakpoints outside of the 3 available in webflow, even if it is a matter of giving us a couple of extra or custom breakpoints to work with versus opening up the entire system to customization. In fact, perhaps from a development standpoint with respect to webflow programming capabilities, maybe it is a compromise solution to give us the ability to make a couple of custom breakpoints.
I’ve run into some design problems with respect to using the desktop breakpoint using webflow in which I’ve had to compensate and also in which I have real world date that conflicts with this scheme. I’ll elaborate…
I didn’t realize it was a problem until a client was looking at the preview of a site we are building for him in webflow. He said parts of some lines were breaking in his monitor and wrapping to a new line. I wasn’t seeing the issue on my monitor. So we looked at his screensize. he was 1024x900. I was 1920x1080. So I was developing the site on n a screen setting of 1920x1080 and everything was looking great. But then he looks at it and it looks like, um, crud.
So I adjusted my screensize to his and saw the issue which I subsequently fixed.
So now I use that screensize for development. But I asked myself if this was an issue in this instance how many other instances might it be an issue in which we are not made aware of.
So then I got to looking at some real world statistics on screensizes. I have clients which we do web analytics for so I’m able to look at real world data. I looked at 190,626 visits. The number one screensize representing about 20k visits was 1366x768. Then 768x1024, 1280x800, 1920x1080, 1440x900, 328x568, 1280x1024, 1600x900, 1024x768 and 1680x1050, respectively in order of appearance.
What this tells me on examination is it would be nice to be able to make a couple of other breakpoints so I am covering the 99%. It also tells me that with the current weblow setting it is not covering 99% as stated and this is clearly obvious because what I saw with a 1920x1080 screen setting in which I was developing the site from, was not what my client saw with his 1024x600 setting he was looking at it from.
So, c’mon guys how about giving us the ability to make a couple of custom breakpoints…???