Container max width override

Hello,
I was taking a look at the Avante theme in the designer and they seem to have overridden the max width container to 1200px which also displays 1200px in the designer. They are using a Container class on the container but I do not know how they did this since the feature is grayed out in the designer. Can someone please explain how they accomplished a 1200px container in the browser and in the designer? is this custom code?

Avante Theme Designer
https://preview.webflow.com/preview/avante-template?preview=df80787aed758ea90577b5beb695c6b6


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

If you just put custom code in the site settings like
<style> .Container { max-width: 1200px; } </style>
it doesn’t show up like that in the style panel, but it works .

I would just use a normal div block and customise it accordingly. I assume you understand that path.

2 Likes

I totally agree with @HammerOz Using a regular div is better.

I do and will take that route, I just like to reverse engineer designs and this one stumped me.
Thanks for taking the time to respond.

2 Likes

Thanks Piter, I am going to use a div.

1 Like

Try this.
Go to, or add a Navbar. Inside the Navbar component is a Container element.
This Container element doesn’t have the Min width greyed out
Change this to 1200px and this should affect all containers

4 Likes

This is amazing - THANK YOU!

Thanks so much zorro, I knew there was some wizardry going on. It’s a webflow easter egg.

far out! Great too know.

@bsmity - I checked out Avante, and from the looks of the container icon, it is using a true Webflow container with the max width set to 1200px. This was a trick I used to do in a prior version of the Styles panel by tabbing through the fields to get to what were normally disabled fields for the container widget, if you clicked directly in them. However, with the new version of the Styles panel, it looks like you can no longer do that, which is a bummer. @Waldo (or any one else) - Any idea why that work-around was taken away? Designing with a 940px width is so limiting. I know we can create our own containers with divs, but that defeats the purpose of having a container widget in the first place. Thanks!

i am using container fluid ,it is more effective …and its never creates override.

I just did

.w-container 
{
    max-width: none;
}

and it works!

You might be a genius. THANKS!