Streaming live at 10am (PST)

Do you use Section/Container, OR, DIVs? and more Questions!

Hello again,

As the title states, my questions are about what everybody uses as common-practice.

Question #1:
What do most of you do when building a page?
A) Use the built-in Webflow “Section” and “Container”…?
B) Use the built-in Webflow “Section”, but a “DIV” for the Container?
C) Completely scrap the built-in Webflow elements, and use DIV’s for both of them instead?

Question #2:
What properties, specifically, does a “Section” or “Container” have, compared to using a DIV?

Question #3:
When/if you use a DIV instead of a Container:
3a) What settings do you apply to it, such as the Width, etc.?
3b) What is the safest way to change the width: in Designer properties, or in Custom Code?

Thanks in advance for any input and feedback!


-Studio2B

1 Like

The pre made elements are convenient helpers, but down the road you can suffer from their induced limitations (nesting). It’s easy to craft a container with a div and the Container element properties, under a .container class. Af for the Section element, it doesn’t have special properties, it’s not even an HTML5 <section> element.

I create everything as a div by just typing CMD+E “D” Enter, it adds a div from the quick find menu.

Container is a 940px div, centered. It’s convenient because it fits the grid. Section does not have special properties.

.w-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 940px;
}

There’s a w-section attached to the element but no properties.

 .w-container {
        margin-left: auto;
        margin-right: auto;
        max-width: 940px;
    }

Just create a .container class by typing “container” in the selector field, and style it in the designer.

There’s zero risk or downside to completely skip using Container and Section elements in Webflow.

3 Likes

Thanks for the response!

So…

A) You’re saying you create your own, but you stick with the default 940px?

B) If I was going to mildly increase the container width, what would you reccomend?
In other words, what do most people who do increase it, increase it to? What should I never exceed?

C) When/if I create my own container, should I be messing with the min-width/max-width/etc?
I’ve seen some people who have different numbers for the width, and for max-width, etc.
I’ve also seen it done instead by adding some Head code… Is that recommended?
And what would be the advantages of doing such a thing?
eg:
@media screen and (min-width: 1200px) {
.w-container {
max-width: 1170px; }
}

Basically, I often tend to find the default container very constraining width-wise…
But I also want to stay in the safe zone, stay responsive, do it correctly, etc. without negative side-effects.

Thanks.

Sorry, never saw your answer.

Depends. I do yes, that’s convenient so I can use webflow grid. Of I craft a personal container that has the same grid but with 4 more columns. Ans I draw this grid in Photoshop and put it on the body of the site, as a background. Like this:

image

The Webflow grid would be like this:

image

So this personal container is set up like this:

image

And there’s a 40px padding left and right on the parent of the container (personal section) so that when it shrinks to 940, content isn’t against the edges:

If you want my grid, get it: https://uploads-ssl.webflow.com/5cffcb24413549c11a139ac6/5d179334f3be3c38cd88e83d_Webflow-1260-grid-pattern.png

Just like described above. 1260. It’s practical and convenient and address larger screens nicely, and makes sense with the Webflow grid.

You should mess with it and only with it. As you saw in my screenshots, such container doesn’t have a dimension, just a max and a min. The min height is just for the element not to disappear when it’s empty :smiley:

No. if you’re going to add code for layout, do it with a Embed component, inside of the page, so that you can see the effects in the designer. but that’s complicated and if you can avoid adding a media screen rule, then do it. Use media screen for specific rules on specific elements if needed when you reach an impossibility.

My clients sometimes say it’s narrow, but I find it’s the right size for readable content.

Well said, don’t put nails in your own tires and prefer keeping a manageable layout.

2 Likes

It’s best to build your own container rather than use the Webflow container from the Elements panel. If you use the Webflow standard container, then you are stuck with a max-width of 940px.

Here’s the code for the standard Webflow container:

.w-container {
margin-left: auto;
margin-right: auto;
max-width: 940px;
}

Here’s some custom code for your own container that will give you far better control:

.custom-container {
margin-left: 5%;
margin-right: 5%;
max-width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}

1 Like