Yes…please add this : ) …need it
1 Like
So can I create css rules for the new media query? I actually changed it to 1600px instead of 1200px.
Hey Sergie, any update on this? I know you said it was “is one of the main features we will be pumping out” but that was over a year ago and just wondering if its still on cards, or if you guys have gone off the idea now?
In relation to the temporary solution you suggested, I am using it now however it means that the extended width is never showing when in design mode, only when viewing the published site, is that correct?
Thanks
1 Like
Hi @danieledgood thanks for asking. This feature was one that we wanted to prioritize, but realized that a quick fix to add a that media query wouldn’t be so trivial. We also decided that it would be better to invest in a flexible grid system than tacking on missing features to an inflexible system. I hope you understand. We are looking for an opportunity to start working on this as soon as we can. We’ve been prioritizing more impactful features atm.
Yeah you’re correct it will only show up in the live site, not in the designer.
1 Like
If you want to work with an expanded “container” div in the designer you can create your own pseudo containers:
100% width property.
a max width 1200px (or any width you choose).
and margin auto center.
It is for just about every intent that I can see the same net result (please correct me if I am off base or overlooking something major). The main component you would also have to modify would be navigation which is relatively simple to add classes and change the max width.
I don’t want to mislead you, This will not allow you to see the results of the expanded media query overwrite as @thesergie has posted, but it will allow you to work and design layouts with the freedom of your very own expanded container at any (max) width you choose - on the fly - in the designer.
@thesergie would it be as simple as making the default container have a modifiable max width property? Can you explain what is special about the container that this is a design constraint? I may be missing something glaringly obvious about a containers true purpose or integration into the larger scheme, so please feel free to correct any of this. I am just wanting to understand. The only thing I can see that would not line up is the preview grid for that width which to me is of almost zero consequence.
From what I have tried so far, the custom media queries can be applied to any class element. So, yes, they do support other properties and CSS rules for any object. I have experimented a bunch adding them for breakpoints at 1200 / 1600, etc and altering font sizes, bigger headlines, my pseudo container properties (adding height to maintain proportions for larger screen), margins for my page wrapper, etc. If you think ahead a tiny bit as to how you want your page elements to behave you can tweak just about anything with a simple percentage or max property on just a basic page wrapper with all of your content dumped inside. There is an absolute ton of Flexibility in webflow to roll your own. I am a total newbie, so I am pretty sure if I can - you guys can kick serious Webflow ass. Try it. It is just a container - don’t let it limit your creativity (agonizing horrible pun for emphasis intended).
-Rob
We’d have to add a new media query for bigger monitors. So in total we’d have 5 devices in the top panel. The challenge is how to implement this media queries in all areas of the designer. Things to think about is how will the styles cascade? From the large desktop down or from the 960px media query (going up to the desktop and down to the mobile devices) or from mobile cascading up? Also most user’s screens wouldn’t fit the 1200px container and the left and right sidebar on their screen. So we would have to add scrolling to the canvas (it’s an awkward experience to not see the entire site you’re working on) or do something more clever. We decided it would be better to think from the ground up about the problem of media queries and layout in general.
Hope that helps!
1 Like
Makes sense perfectly @thesergie thanks! I am on a fairly big display so I hadn’t taken in the impact of the Weblow designer UI.
Hello, when will the media query for bigger monitors be in use in webflow? As I see this post started in 2013 and seems that since then webflow team is working on this feature. If it will not be in use in the near future. Could we still use this code suggested before publication without having any complication on the other devices and smaller monitors.
@media screen and (min-width: 1200px) { .w-container { max-width: 1170px; } }// Large desktops and up
@mertitiz,
The code provided works perfectly and still preserves the existing media queries for devices. It simply alters the max-width of the desktop default container, setting it to 1200px. The remaining device media queries are unaltered.
where is the custom code settings?
Hi @michaeljgilmore, you can do this using a bit of custom code. Try adding a media query and set w-container’s width to something different.
Example:
<style>
@media screen and (min-width: 1200px) {
.w-container {
max-width: 1440px;
}
}
</style>
I hope this helps. If not, please let me know – I’m happy to assist further! 
1 Like
This topic is now unlisted. It will no longer be displayed in any topic lists. The only way to access this topic is via direct link.
This topic is now listed. It will be displayed in topic lists.
Is there a way to make the width of the page or container 1440 for desktop?
