Streaming live at 10am (PST)

Activate 1200px "Large Screen" media query

I think its easy, similar to what @thesergie wrote:

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

Hi Dave,

can you tell me what are the different break point values please ?

What i found working also is in the designer setting max-width: 1200px on the container. Then you dont need custom code.

@Joscreative where did you change the designer setting max-width?

If you have advanced options on it shows below the normal width setting min and max width when you have the element selected.

If also found out you need to make a div-block and name it container, if you use the default container from webflow you cant chance the max settings

It looks like this work. The only limitation I see is that you have create unique divs for each element vs use the pre-made ones.

Does anyone see in danger is this option to make a larger screen width for desktops?

@Joscreative,
I like the widerscreen option, but it broke my other versions.
Do you change the max-width for the other device sizes?

1 Like

I used something like this:

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

…in hope that it will increase the gutter width from 20px to 30px between columns, like Bootstrap. But I see no difference. :slight_smile:

1 Like

Yes this worked fine for me

@media screen and (min-width: 1200px) { .w-container { max-width: 1170px; } }

Hello all,

Any idea when this will be ready so we can use it in Design and Preview mode? We need to actually see what the design will look like on larger monitors.

It’s been a very long time since we have used a 960 px container width as a default for a clients website.

I think this should be a priority. Thanks

2 Likes

i second this! No need for 960px containers anymore.

You can use a normal div and create your own container :+1:

1 Like

3 years have past, and thereis no that function :frowning:

1 Like

yes still would love a simple function in the dashboard where we can set the default width of the container.
But in the meantime just using a regular div and give it a class called container also works pretty good.

Hello there, I am trying to implement this code on as site that I made and it seems to not be working. I changed all of the site to be at 992. So it works great in on the iPad now (landscape) but on larger monitors it just seems kind of small.

I copied rhe code into the head field and I am assuming that I have to change the w-container name to match my class for the overall container in my site?

I really would like to achieve what you have described that on larger monitors it goes up to 1200 px and ones at 992 it reverts to the smaller size.

I did not understand the sizes in your code - where does the 1170 come from?

Thanks in advance

@remix 1170px matches the bootstrap grid system

See this page for more info
http://getbootstrap.com/css/

1 Like

I’ve been playing with a percentage (%) instead of a fixed pixel width…

seems to work with percentages very nicely.

Mainly I’ve been using 80% and 90%.

  @media screen and (min-width: 1200px) {
    .w-container {
      max-width: 90%;
    }
  }

I’ve also been playing with the min-width value… receiving good results.

Anyone else been trying this.

Have been trying to create a cascading media size… from 2560 down to 1200.

  @media screen and (min-width: 1600px) {
    .w-container {
      max-width: 90%;
    }
  }
1 Like

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: