Streaming live at 10am (PST)

Percentages and breakpoints


#1

I quite like Webflow so far, however I'm missing two things:

  • No percentage-based paddings/margings, right?
  • Why just 4 breakpoints? Is it possible to set more?

Maybe I've overlooked something and this stuff is possible?

Apart from that I could see myself using Webflow in the future, especially for Prototyping.


I need help with custom breakpoints to keep my site pretty
Problem with iPad landscape view
Support for larger/custom media queries/breakpoints
#2

Hi @Chris_Krammer, we're working on adding percentage-based padding and margins in the advanced panel.

As for more breakpoints we are planning on adding a 1200px media query for bigger monitors, but we don't plan on creating a custom-breakpoint solution in the short term. We'll be sticking with the Twitter Bootstrap standard media queries because they covers 99% of resolution cases.


#3

Thanks for you answer, thesergie.

Regarding breakpoints: But you know, that breakpoints should be set - like the term suggests - when the content "breaks" and not based on different device sizes. Because there are already so many different devices and many more will follow, and without this flexibility to set custom breakpoints a huge "feature" is missing in Webflow. Hope that you will think about it again.


#4

Thanks for the feedback Chris. Right now we're following the principle of using a set number of breakpoints for major groups of devices (you can read about that here: http://alistapart.com/article/designing-for-breakpoints). There are times when the layout "breaks", but I feel like it's better for a web designer to be constrained to learn how to build a more effective layout using CSS instead of making 10 breakpoints to fix all the breaking areas. This is just my opinion.

But I agree there are times when another breakpoint would be nice for those tricky layouts. I'm sure we build out custom breakpoints in the future.


#5

I'm replying only to support Chris' idea. =) Right now, in our company, we're testing Webflow and we feel it's a great tool. But as we make websites up to 990, 1024, 1360 and 1360+ pixels, we hugely miss the flexibility to set our own breakpoints. This feature would make Webflow (at least for us) a total winner!


#6

Thanks for your feedback guys! We are considering it.


#7

Hi guys! Percentage-based margin and padding have landed in the latest webflow.

You can also use EM units for margin/padding, which allows you to change the font size of a parent container to affect the spacing of inner elements.


#8

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.....???


I need help with custom breakpoints to keep my site pretty
#9

Is there anyone from WF that has a response here? @danro perhaps?

Maybe a small glim about the options for the near future?


#10

I totally agree with this and this is something that should be fixed!
Please :smile:


#11

I'd love to see adjustable breakpoints. I understand what @thesergie is saying. Typically those 4 breakpoints cover everything. However, I am working on a site right now and would love to have the desktop break to the tablet view at 1170px rather than 991px. ( I know this is unconventional, but.. reasons ).

Any word on this feature?


#12

Just wanted to bump this. I am using webflow for prototyping and the platform we use is based on Foundation breakpoints. Having the flexibility to add multiple breakpoints would be a big asset for my team.


#13

yeah, lets do something about this!


#14

#15