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

[Studio2bDesigns]

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

[vincent (Vincent Bidaux)]

@Studio2bDesigns

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?

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.

@Studio2bDesigns

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

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.

@Studio2bDesigns

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?

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

[Studio2bDesigns]

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.

[vincent (Vincent Bidaux)]

Sorry, never saw your answer.

@Studio2bDesigns

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

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:

The Webflow grid would be like this:

So this personal container is set up like this:

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

@Studio2bDesigns

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?

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

@Studio2bDesigns

C) When/if I create my own container, should I be messing with the min-width/max-width/etc?

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

@Studio2bDesigns

I’ve also seen it done instead by adding some Head code… Is that recommended?

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.

@Studio2bDesigns

Basically, I often tend to find the default container very constraining width-wise…

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

@Studio2bDesigns

But I also want to stay in the safe zone, stay responsive, do it correctly, etc. without negative side-effects.

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

[Daniel_H]

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;
}

[GeorgyDesign (Georgy Alaverdyan)]

Hi, @vincent!

I would like to clarify the current state of the “section” and “container” elements:

1. Container is a div block, but with some limitations that keep it responsive automatically (e.g. 960px width). So no width and margin changes. Though, max-width can be changed.
2. Section is just a div block named “section” and has a specific icon for that. As far as I know, there are no limitations.

If that’s all true, should I use them if I want the navigation’s structure to be organized and tidy? These elements have unique icons which are great for me — more visual clarity!

Also, you’ve said that section block is not even a real section because it doesn’t have a section tag. My question is about these tags — I don’t recall McGuire and other The University’s folks using tags in their courses, specifically “The Freelancer’s Journey” and “Portfolio 2021” — not gonna lie, I didn’t pay that much attention to them. Were you talking about classes or tag options in, well, the “Options” tab (that one with a cog icon). Should I use these tags for every element? What about Google Tag Manager? Any tips on using them?

Thanks a lot for your reply in advance, Vincent! I appreciate your help for the community!

[vincent (Vincent Bidaux)]

It can be convenient for some, it auto centers. Have you noticed that they have freed the max-width parameter on that element?

[vincent (Vincent Bidaux)]

@GeorgyDesign

If that’s all true, should I use them if I want the navigation’s structure to be organized and tidy? These elements have unique icons which are great for me — more visual clarity!

Really you do what you want and feel good with. Having a unique icon is a legitimate reason for wanting to use it in a visual design tool. Also as I said above, since I wrote the original message, Webflow has allowed us to change the max-width value for Containers, so it’s not cumbersome to use anymore.

@GeorgyDesign

Also, you’ve said that section block is not even a real section because it doesn’t have a section tag. My question is about these tags — I don’t recall McGuire and other The University’s folks using tags in their courses, specifically “The Freelancer’s Journey” and “Portfolio 2021” — not gonna lie, I didn’t pay that much attention to them. Were you talking about classes or tag options in, well, the “Options” tab (that one with a cog icon).

I’m talking about HTML5 tags you can define for element in the Settings tab: section, nav, aside, etc. They replace the generic “div” and make the code more semantic. They are important for accessibility. FYI Webflow is celebrating accessibility today, check their blog and the top of the forum.

@GeorgyDesign

Should I use these tags for every element?

What you should do is learn about them, to begin with. You can do a site without using them. Using them have no benefit for you or immediate benefit for your client. It’s good for your karma though. I personally recommend that you use them as much as you can.

@GeorgyDesign

What about Google Tag Manager? Any tips on using them?

GTM is a completely different thing. They’re vocabulary placed at various places on a site in order for Google to track what happens on the site — navigation, clicks…

My best tip about using GTM: as soon as possible in a project, try to make everybody agree that you’ll just follow directions from the SEO team for everything GTM related. And tell them there is NO WAY that you’ll add classes or rename classes for GTM tracking. Keep the classes for design and tell the GTM guys to find another way.

[GeorgyDesign (Georgy Alaverdyan)]

@vincent

What you should do is learn about them, to begin with. You can do a site without using them. Using them have no benefit for you or immediate benefit for your client. It’s good for your karma though. I personally recommend that you use them as much as you can.

Thanks! I care about accessibility, so I’ll learn more about these tags.

@vincent

GTM is a completely different thing. They’re vocabulary placed at various places on a site in order for Google to track what happens on the site — navigation, clicks…

My best tip about using GTM: as soon as possible in a project, try to make everybody agree that you’ll just follow directions from the SEO team for everything GTM related. And tell them there is NO WAY that you’ll add classes or rename classes for GTM tracking. Keep the classes for design and tell the GTM guys to find another way.

Can you clarify what you mean about “follow directions from the SEO team?” As for now, I don’t have that much experience working with other teams — I do most stuff by myself. As for Webflow and GTM, as far as I know (how many “as” haha), it’s a good idea to use GTM because it helps with organizing and adding multiple trackers, analytics, other code-related stuff in a long run. Do classes have an impact on GTM? I mean if I do everything by myself right now, maybe it’s a good idea to do keep GTM in mind while building a website.

Thanks for the replies!