Activate 1200px "Large Screen" media query

Thanks, exactly what iā€™m looking for this morning!

Thanks for the trick!
Will this have an effect on a slider with images? Should I upload a 1170px version of my image then?

Hey Henrik, it depends on how you have your images set up in the slider. If the images are 100% width then they should automatically resize to fit the new size. If they are background images with COVER then the bg image will stretch. If itā€™s an image with a set width/height, then it would stay the same size in that media query. If thatā€™s the case Iā€™d make an image for that size (assuming most of your visitors will land on that size since 1200px screens are most popular).

You should publish to your subdomain and see how it will behave.

Very cool addition @ thesergie! Greatly appreciate this. I had been building my own pseudo ā€œcontainersā€ a max width attribute on the sections and using percentage based margins, but this opens up additional options for how they behave.

Canā€™t wait to have this as a native webflow behavior so we can rapidly recraft content for media queries above 970px.

Loving webflow BTW - it has taken my hacked prototyping attempts from epically painful to truly empowering, fully functional and heavily featured sites in a matter of just a few days in the app. Life altering!

Thank you seems a bit inadequate! - Robert

3 Likes

thank you very much for this!

Can I ask, in base funсtional it is impossible to make sites in 1200px ? o

Hi @atreidesp, thanks for the question. You can add the custom css media query to the Header in your custom code section to make your site 1200px in published mode.

So you can make a site 1200px via custom css, but you cannot see the media query changes in the designer or preview modes. We do not have built in 1200px breakpoints, anything 991 px and higher is considered Desktop mode (including ipad horizontal view for example).

I hope that helps :slight_smile: Cheers, Dave

very good answer, my friend! Thank you!

Do you know if there are some ways to make 1024px sites as easy as in webflow ?

Hi @atreidesp, thanks. I am not sure I understand the question. You can create a site a 1024px media query as well as a query for 1200px, you can change the value as you wish in the custom css. We do not have a breakpoint for 1024, only desktop (anything over 991px). Maybe if you could clarify maybe I am not understanding the question. Cheers, Dave

i wanted to know where can we make wide(not 960px) sites in design mode. We have some sites made in 1024 and now I tried to make his copy and web flow and noticed that in web flow we can make only 960px sites.

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.