Support for larger/custom media queries/breakpoints

Continuing the discussion from Support for larger/custom media queries/breakpoints:

Any updates on this? :sunny:

1 Like

Serge, Du I understand you right? You’re taking care of the canvas situation of us Webflow users? I understand this, but I assume, we designers should have bigger resolutions than the typical endusers to deliver results for all resolutions. At least about 1200 we should not talk, anymore. But why not thinking about resolutions of the bigger screens. Especially hero images are a subject. While they’re able to scale at bigger screens, I cannot see a possibility to increase the height of the hero section also, to avoid a bigger cutting of this images. This leads to many compromises, while adjusting the positioning of hero images for 960 and above.

1 Like

@pupinko. Hi Harald, if you would like a full width hero section that uses a background image to proportionally scale with the browser width, you can insert a VW value for height, min-height or max-height according to your goal (a value of 56.25VW is a perfect 16:9 ratio for example). You can also drive the height to fit a percentage of the available browser height by inserting a VH value into the height attribute (try 90VH). Then you have control over the optimum image crop for the browser window every time. Explore how VW and VH behave. I think it is the fluid responsive solution you are looking for.

1 Like

@vlogic Hi Robert, thank you very much for this hint. This works great. But still hope, we will get some more breakpoints for higher resolutions, soon.

1 Like

I am hoping for that too. @pupinko. They would be a great addition to the toolset.

I typically build my own “container” using max-width and auto center. If you need to work wider than 960px that is a fairly simple work around in the meantime and you can preview in the designer and scrub the width as you design. The addition of the media width scrubbing tool has really filled the need for me when working with a fluid layout. It is very rare now that I need to write a custom media query as a result. I would love the simplicity of it as a built in tool for sure!

And soon would be awesome. :smile:

1 Like

Hey guys thanks for your patience! We started the preliminary work on this feature so we’re hoping to ship it sometime this summer. No hard ETA but just wanted to let you know that the time has come for big screens to receive the love they deserve! :sunny:

Update: Sorry guys, this is a much harder problem than we thought.

11 Likes

Well this is really great news, @thesergie!
Thank you, and we are really waiting for this feature, because now after code exporting people need to write more media queries for larger resolutions in CSS manually. Please keep us informed.

2 Likes

+1 for this feature… thanks.

2 Likes

Looking forward to this - Its one of my biggest Webflow gripes…

1 Like

Nice! I was thinking “summer, oh man, that’s ages away”… But then I realised you mean US summer! Can’t wait

1 Like

Oh heck yeah. Can’t wait to get a hold of this. Thanks @thesergie!

1 Like

Update: this feature is being delayed due to our entire engineering team focusing on infrastructure improvements (stuff that will help Webflow scale and build features faster). I thought we’d be able to get to it but I underestimated the work. Sorry for over-promising. :cry:

I created a quick poll to get consensus on what’s expected from this feature—is it just a new 1200px media query or being able to create custom breakpoints…

What do you want?

  • I’m happy with a pre-defined set of breakpoints (1200px, 960px, etc…)
  • I want to create my own breakpoints

0 voters

3 Likes

3 Likes

Hello Friends, first, sorry for writing, I am using Google translator and congratulations Webflow, I’m finding it a very powerful tool!

I believe it is possible, most like to insert another breakpoint after 991px as tablets landsscape and super monitors, such as: 1920x1080px is used the same layout.

Instead of 4 options screens, you could have 5 options screens? For example: 2 versions for Desktop? From 991px to 1170px and 1200px Above?

Thank you! Success to all!

Unfortunately it’s not as easy as just adding a 1200px breakpoint for larger displays. Currently half of Webflow users are using displays that are 1500px or less, which means that with a 1170px container and the width of the left and right panels inside the Designer you guys will have horizontal scrolling. Designing for a site that’s wider than what your screen supports is harder and can be more confusing. One way to solve this is adding zoom functionality or just adding horizontal scrollbars to the canvas.

So we’re thinking through some solutions to see which is most intuitive and future-focused:

  • Add a 1200px breakpoint, but have the styles cascade from 960px. Wouldn’t drastically change how current projects work.
  • Add a 1200px breakpoint and new projects start from this breakpoint, with styles cascading down from there. Current projects would be asked if they want their 960px styles transferred over.
  • Add 1200px breakpoint (same as above), 960px, etc and allow users to adjust the ranges of each breakpoints, but not add new ones.
  • Start with 960px breakpoint and allow you to add and adjust new breakpoints as you design. (Possible to start with preset breakpoints and mobile-first approach as well).
3 Likes

Also looking forward to this feature!
Half of my projects are targeted at users with large desktop screens, so having a 1200px+ breakpoint would be amazing.

I’m voting for horizontal scroll. After all, even the design softwares like Photoshop, Illustrator, Sketch, when we designs interfaces that are for desktop resolution, taking into consideration the left and right toolbars that take up horisontal space, we designers end up panning the interface because it can’t be seen entirely in actual size.

1 Like

I’d vote for horizontal scroll as well for the same reasons Zlate gave. Shift+scroll wheel is your friend!

1 Like

I think we need the large desktop breakpoint as well as tablet landscape breakpoint!

2 Likes

Personally, I think the way forward is whatever is the quickest and easiest way for you guys to support a 1200px breakpoint! Which I assume is pre-set breakpoints and scrollbars. And ideally a specific landscape tablet breakpoint too. Like many, I really need this feature and get round it with hacks.

Don’t get me wrong, custom breakpoints would be great, but that’s an enhancement over a good old wider screen, so if it’s quicker, release the simple version first.

Likewise ways to let users with smaller screens edit them without scrolling. If you are using a smaller screen, then you lose nothing by not using the wider breakpoint! Although in design tools there’s fairly universal pattern of holding down space and being able to drag the screen around, so an implementation of that would be the ideal fix - or another key if grabbing space from the browser is an issue,