Streaming live at 10am (PST)

Activate 1200px "Large Screen" media query

Hi thesergie,

is its possible to change the grid in the editor? if we have a layout in photoshop at 1140 px and want to transfer this into webflow we can’t do this exactly. if we have an horizontal navigation with any buttons they wrap ealier as we would use an 1140 grid and the webflow editior is useless for this case.

Hi Toby! Can you clarify what you mean? By “Editor” do you actually mean the Designer? By Grid do you mean the visual grid overlay that’s turned on on the bottom left corner or the actual grid width (that affects columns and containers)?

hi,

sorry, yes. i mean the designers view and the grid overlay in the left corner. your’re a prophet. :slightly_smiling:

At the moment you aren’t able to change the grid view size and gutters. But we have been thinking of ways to make that more flexible. Unfortunately it’s not a huge request so it unlikely we’d get to it anytime soon.

Thanks for this hopeful feedback. I think thats a feature which that will make many webflow users happy :slightly_smiling:

Hi,

whats about this question? Why do you ignore such questions?

I’m bumping this up because this is a very important issue for us. To be able to have sites that fit in an 1140 or 1170 grid is very important to our clients, they don’t want what they call “skinny” websites on their monitors. It seems like this is a feature that should be added to webflow by now? Especially if it’s just a snippet of CSS that we have to add. At the beginning, when creating a site there should be an option to set the site’s max width.

Is this a feature being worked on?

Because the alternative of adding CSS, publishing to see, then going back and adjusting elements padding and margins, then publishing again, is exhausting. And the alternative of using divs when all of the default items are created in containers is a lot more work than any of this should be.

1 Like

Add into your custom code

  <style type="text/css">
      @media screen and (min-width: 1200px) {
        .w-container {
          max-width: 1170px;
        }
      }
    </style>

I think that the entire breakpoint system in @webflow should be re-thought. It is currently based on arbitrary breakpoints, which is the incorrect conceptual model for this feature, in my opinion. The breakpoints are not completely arbitrary, as they try to represent an average size for different device types, but even this averaging concept is now too limiting for modern web design, as the number of device types and sizes has exploded in recent years.

I do like the stretching feature in the device pane that shows me different device names at different sizes, but i can only see how the design will behave, not add breakpoints and make changes when needed.

I think adobe muse has a better conceptual model, which is to allow the user to add breakpoints when the design breaks, as this represents the best way to mitigate the endless sea of devices that exist in the world. If we focus on the design breaking we then have to worry less about the type of device, as our focus is on what the design needs at any given point in time. Adobe implements their solution by having what is essentially a mirrored pixel count strip on top, which the user can click on add a breakpoint when the design breaks, which seems to be a very elegant and versatile implementation of the concept.

The current breakpoint implementation in @webflow is starting to become more and more difficult to work with as my designs get more intricate and exacting. I would love to be able to add breakpoints anywhere, as I can with code, without limitations, and can serve a wider array of devices with a simpler conceptual model.

This, of course, is mirroring the opinions of fine folks like Rachel Andrew, Jen Simmons, Brad Frost, Ethan Marcotte, etc, on the subject. Nothing new from me :slight_smile:

CC @PixelGeek, @thesergie, @callmevlad… thoughts?

R

2 Likes

Hi :slight_smile:
That this is not a huge request is for me really strange. But i’m thinking, if you want webflow to take the step to become a design tool, a good grid system is really important. I thought this was in the making, but if not, I really wish for it now.

I will start a thread with my wishes for it :slight_smile:

I’ll have to try this, thank you.

Still wish there was either one more layout (like wide desktop, then desktop, mobile landscape, mobile) or an option to set the width somewhere easily and not have to manually mess with divs and whatnot. All of the 960 sites look so small/skinny on most all desktops I sit at.

this only affects the rendering upon publish and will not let you design within a larger breakpoint…

copied message into reply

yes. That’s correct. I must have mis-understood your post.

I wish Webflow would implement 1200px without a hack.

It would allow allows us to live design in those resolutions as well.

1 Like

Updating to responsive images broke this layout for some of my site. Details are here… Responsive images broke my 1200px layout

Hi @thesergie,

Questions from a newbie:

If you want your website to be 1200px wide instead of the default 960px when viewed on larger monitors, for now what you can do is add this code below to your Custom Code tab (in your site settings) field. When you publish your site, the styles will cascade from Default (laptop) media query and the columns will become wider.

<style type="text/css">
  @media screen and (min-width: 1200px) {
    .w-container {
      max-width: 1170px;
    }
  }
</style>

For more information on where to place Custom Code, please refer to this article:
http://help.webflow.com/site-settings/custom-code75

Note: At the moment you cannot create unique styles for this media query like you can with other media queries that Webflow supports. This is sort of like a “toggle” that activates this 1200px for big monitors. All the styles from Default cascade to this “Large Screen” media query.

  • that means I can design the whole website, and then in the end add those custom code lines, to check how it works on my publish website?

  • “Content and styles will stay the same” I assume that in larger screens will affect the look&feel of my website? like you said:

If you add this code snippet and publish your site, people with screens 1200px and larger will see a wider version of your website that fits their screen more. What happens is the container width increases as well as the columns width and the space between the columns increase. Your conforms to these wider containers and columns.

Say… I have a column with 3 or 4 lines of text, in larger screens I will have maybe 1 or 2? am I correct?

I need to design a newspaper (to be developed on bootstrap) from scratch and I would like to be larger than 960px, at the same time I want to be sure that the look, feel and behaviour of my website will not be affected dramatically. What is your best advice?

Thanks in advance.

1 Like

Sad to see a feature which has been requested for over 3 years hasn’t been implemented yet. Any updates on a way this will be?

I love the tool but this would be so much easier if this wasn’t needed to adjust with a hack.

1 Like

In 2013 they had a reply saying the updated larger breakpoint would be coming “in a few months”.

It is now 2016 and we are still stuck with 960. Yes I know you can custom code a larger breakpoint, but we need an additional, larger breakpoint is the issue for me. I am fine with 960 for a small laptop, but we need much larger wide breakpoint after that.

3 Likes

To give a brief update, new 1200px/1440px breakpoints can be tracked by watching this wishlist item: https://wishlist.webflow.com/ideas/DESIGNER-I-5.

This is now on our short/medium term roadmap (3-6 months), and labeled as “Planned” within the Wishlist.

Hopefully that helps!

2 Likes

You guys said this was coming “shortly” several years ago :pensive:

2 Likes