Activate 1200px "Large Screen" media query

Community resources Webflow Tips
1

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) <head> 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:

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.

21 Likes
2

I’m very glad you posted this. – Bootstrap user

3

@thesergie
When will the media queries of 1200 px & above be released?
Can’t wait for it to be available!

Cheers!
Daru Sim

1 Like
4

Hi @darusim_ws! The larger media query is certainly in our plans, but we also have a number of other awesome improvements currently ahead of it. So it’s likely still a few months out.

We’ll keep you posted, though! I can’t wait to get this too!

5

Apart from adding these lines in the head section, should I do something else ?
Maybe use the w-container calls somewhere ?

I will probably look stupid, but who knows … :wink:

6

Nope, Michel, that’s all you have to do. Adding that line of code will make your columns wider on larger displays. The content and styles will stay the same as in your desktop (default) device.

7

OK; thanks for clarification

8

kkilat, was just checking in the progress of the 1200px media query addition. Can you share any details around timing?

1 Like
9

This doesn’t actually do anything in design mode I take it?

10

Question from a newbie - what’s different with Webflow’s site that enables it’s responsive 1170px (?) width vs the default 960 customer sites?
Thanks for the awesomeness,
Adam

11

That’s correct Paul. It affects published sites.

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.

12

Thanks, exactly what i’m looking for this morning!

14

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

15

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.

16

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
17

thank you very much for this!

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

18

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

19

very good answer, my friend! Thank you!

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

20

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

21

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.