Streaming live at 10am (PST)

Activate 1200px "Large Screen" media query


#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:
http://help.webflow.com/site-settings/custom-code

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.


Responsive blocks at 1280 px
Are we stuck with 960px containers?
Creating a page for 100% width
Auto width divs and column breakpoints help
Sectioned design inspiration links
Needed: Ability to choose a width larger than 960
Wide screen desktop (1200px) and tablet landscape media queries
I need help with custom breakpoints to keep my site pretty
Setting up the the width and height of webflow's canvas size
Problem with iPad landscape view
Problem with iPad landscape view
Need Help To Widen Conatiner Holding Image
Custom Break Points
How do I make website responsive?
Support for larger/custom media queries/breakpoints
Support for larger/custom media queries/breakpoints
How do custom w-container width?
Are we stuck with 960px containers?
Is the navbar limited in its width?
iPad Landscape mode (991px breakpoint)
Responsive images broke my 1200px layout
Responsive design for chromebook
Tablet Horizontal View - Background Image does not display correctly
Urgent: Grid with 1140/1170 pixel needed
How to get a story across in a beautiful way
RWD viewports / breakpoints support doc's / tutorials?
Adjusting slider height on bigger monitors
I need help with custom breakpoints to keep my site pretty
Responsive Breakpoint for iPad
Change the grid in designer view
Responsive Breakpoint for iPad
The Bootstrap Question
#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

www.darusim.com


#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?


#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.


Trouble keeping consistency in between breakpoints
#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


#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 smile Cheers, Dave


What size is it better to make a layout webflow
#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.