home
No code to 
<know code>

w3-container

The w3-container is a standard CSS class which adds a 16px left and right padding to any HTML element.

Webflow > Elements (A) > Layout > Container

In Webflow the w3-container comes with a 940px width on larger displays that keeps your content centered relative to the browser window. On smaller devices (like phones and tablets), containers extend across the full width of the screen.

For this reason many designers prefer to create their own "Container div" where they can control the behaviour in any viewpoint. Otherwise in mobile views your headers and body text will start and end at the sides of the device.

For example, the div "cont" which this paragraph is in has this code:

.cont {
 min-width: 940px;
 margin-right: auto;
 margin-left: auto;
 padding-right: 2em;
 padding-left: 2em;
}

@media screen and (max-width: 767px) {

.cont {    
padding-right: 1em;    
padding-left: 1em;  
}

You can see the minumum width is 940px, there are auto right and left margins, and 2em padding right and left too.

But in smaller devices (with a maximum width of 767px) the padding is reduced to 1em right and left.

The main problem with this is that in the Webflow > Navigator (Z) this "container" is only a div block. So navigating and moving container is more difficult than using the Webflow Container

Using custom code to change the default Webflow container

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.