Streaming live at 10am (PST)

Support for larger/custom media queries/breakpoints

I have just tested a hack, where I can at least preview the wider breakpoint within the interface. You will still need to test the published site as the breakpoint between the wide (1170 in my case) and tablet is quite large so it is best to keep this fluid.

After creating a section, rather than putting in a standard “Container”, drag in a “div block”, then give it its own class eg. “wide1170”, then go edit the style for the container and set it to “max-width” 1170 and margin left and right to “auto”.

Drag your “columns” into the container, and they behave as they would in the Default desktop container, only the container is 1170px.

Bam - you have your own wide container for Desktop!

1 Like

Hi, just new to webflow and is loving it so far but being directed to this post from another user and seeing that the start of conversation was in 2013, I was wondering when would the editable container breakpoint feature be available? Really looking forward to being able to do so without using custom code.

1 Like

I agree, and still feel that this is a much needed feature. Especially so for the topnav. Changing topnav widths in Webflow is a bitch.

1 Like

Just make your own container out of a div. :slight_smile:

Set it to 100% width, add a max width, centered position and place your elements inside of it ;).

2 Likes

@Waldo This might work for the body, but it breaks webflow’s topnav. A width of 1170px gets the following when published.

Even when I can get it to “sort-of” work, it breaks on resizing which means I spend most of my time trying to figure out how to get the hamburger menu to work correctly.

Just not as simple as it could be.

1 Like

TL:DR
How can I manually re-code the breakpoints in WF’s custom code so that I get desired breakpoint at 1800px instead of the current 1024 (or 1200)px.

Situation
I’ve designed a site here: http://outcc.webflow.com/ that doesn’t use containers to display content on the main page. (Because I want to use the full width of the screen). My site is pretty on wide screens (1800px and up) but a pain between the 1000 - 1800px. So, I want to rewrite the WF breakpoints. Is there an easy solution by adding some lines of custom code to the head?

Desired solution
I’m looking for a solution that lets the user see the tablet portrait upto 1800px width. So:
1800+ px --> desktop view
+/- 780 - 1800 --> tablet portrait view
and the mobile views are fine.

I’ve seen these three topics, but can’t seem to find the solution:



1 Like

Hi @Diu, there is no way to rewrite breakpoints. I think the best solution at the moment is to define your own css media queries, using the same principles found on this topic:

You would need to create the media queries for each screen min/max dimensions you want to use, then target the classes used in the designer to be a certain dimension within each media query. It certainly is not as easy as using the built in breakpoints, but it is possible to do this using custom css in your header. Please note, those custom media queries will not show until publish.

I hope this helps, cheers, Dave

1 Like

Hi @cyberdave, Thanks for your elaboration.
I’ve been playing with it for a couple of days now. And although custom coding would really be the desired option, what I’ve imagined is not possible within the WF designer with custom code.

Could I make a request, similar to the one made by @adtastic, that we can define our own breakpoint ranges besides the current phone portrait & landscape and tablet portrait? Please note: ranges! Because I only use my tablet in landscape because of a nice dock, and that messes my design (without containers) up completely. Plus, when someone has a 27 or 30 inch screen, it’s a real shame to not use that whitespace beside the 1200px container.

Would something like this be possible in the near future?
Thanks in advance,

1 Like

Hi @Diu, thanks for the response. At the moment, the custom css is the only solution for custom breakpoints. We have a lot of activity going on now, with nearly round the clock internal development taking place. I cannot say when we can get to this, but we will make sure gets on our feature request list. :smile:

Cheers, Dave

1 Like

Thanks Dave, guess we’re all looking forward to what you guys are building. Keep us posted!

1 Like

Hi,

First of all, thanks for the beta invite. Loving the concept. I am trying to build my first site here and noticed that containers are fixed to 960px. The site I am building now is a responsive site but is set at max-width 1140px. I’ve been designing inside the 960 container and then manually changing the container width to 1140px after publishing.

Is there no way to change the default 960 to something else?

thanks

1 Like

Hi Dan!

Right now every one of our websites uses the 960px responsive grid system (based on Bootstrap 3). The Laptop (default) media query is the place you edit for 1024px screens and above. This is what we support right now.

We will give you guys the option of designing for Large Screens (1200px resolution and above) soon. All styles in this media query will cascade from the Laptop (default). The grid will be the same 12 col grid, but with expanded gutters so everything will look the same as the 960px but with more white space.

So hold in there! Does this answer your question?

4 Likes

Hi Dan,

You could always define your own grid but its a little bit of work. For example, I created a centered 1140px container by adding a section (100% width fluid) and then adding a div block with a width of 1140 and setting both left/right margins to auto and then you can add columns inside that div.

3 Likes

Thanks both of you.

Perfect. Simple solution. Thank you.

1 Like

so what happens when you need 960px? may bey you should keep that css recorded to ad to media querys… or may be you can uses %for that particular container…

just trying to keep things inside the tool, BTW glad to see you here pingram (used to see you in UT forums… )

1 Like

Hey pablorey, good to see you too. 960px is the default container so you would just use that. This topic was questioning how to get around using an alternate width container.

Yep, I still use Ultimatum but since the updates have slowed down I haven’t been on the forums in a while. I’m actually using webflow to prototype the designs and then using the html/css to build my Ultimatum child-themes. =)

1 Like

yes webflow seems blasting fast… check out other similar tools (that seemed with more bells and blah blah -that compete with this tool) but for mi it was a kind of fight with these tools… seems that i never dropped where I wanted to, not at first time)

respect UT… seems that finally the thing are very near… take a look.

but what is a surprise to is the combo webflow+UT… I was (I am) thinking using webflow to do themes from scratch, or with _s (from themeshaper) or even Genesis… but I know that you are one of the UT user who better knows it (tricky, sg-layout and you… are the top 3) so I am going to give a try with that combo.

anyway foud a lot of UT users (and former users like cmbxweb or something) in cobaltapps, but here it was a surprise :slight_smile:

1 Like

@thesergie I followed @pingram3541 suggestion and made my div’s 1140 px. Love the result. Is there any way to have this cascade down through tablet & phone? I’m trying to modify the tablet layout now but it ends up modifying the laptop version as well. Thanks!

1 Like

@thesergie any ideas guys?

1 Like

The div should cascade down automatically if set to a hard pixel number. What are you editing in the tablet that affects the laptop? The class for the div that you added 1140px to? That seems odd. Are you trying have the website stay 1140px for all devices?

1 Like