Container - Webflow's most misunderstood element - Webflow tutorial

[@Webflow]

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

[@PxxTKlickshot]

Imma be real, I've watched thousands, if not millions of tutorials where so much time is just empty talking. These are straight to the point, informative, very well made AND funny. Sign me up!

[@ChrisMooreOfficial]

This whole set of videos by Webflow is literally "the best web design training on the internet"! 🙌🎉 So much gratitude. Keep it up the great work McGuire Brannon and team!

[@misterjuls]

Using Webflow since the early days (when we couldn't set a large max width for containers), I'm used to use Div elements for containers now, but I'll try to use them again :)

[@EricWizKidOdom]

"There's no right or wrong way to do this, as long as you're creating clear, functional groupings for content on the page." Key advice. There's so much "you should or shouldn't" do this advice out there when so much of it really boils down to being one particular person's opinion. Create clear and functional design and content, how you get there is up to you.

[@dusandjordjevic701]

Now create video for the second most misundetstood element - COLUMNS 😁

[@burner918]

Great video. Glad to see that I wasn't the only one who keeps getting confused about this. From a training content perspective, kudos for explaining what so many are thinking -- which is not just the definitions of each of these three elements, but "When to use which one". Thanks Webflow.

[@xamznerol]

Awesome, can you make a video explaining how to sensibly name your class structure. or what common approaches there are.

[@RDaneelOliwav]

Look for BEM css technique, most tech companies use it

[@user-ti9zc1xv2b]

Go for BEM - Works greatly with Webflow too.

[@peterwolftips]

Credit to your writers! I really like their humor which makes me less sleepy after 10-15 of your videos :D

[@eslamsalah832]

every single video of webflow university keep making me sure that webflow is the best!

[@innakolisnyk4522]

Thank you. Learning webflow is pure pleasure!

[@ameereeo]

tbh I was never going to learn Webflow, instead I was more interested in bubble but by watching only one video of Webflow Conf introduction of 2021, It just blew my mind, interest sparked and here I am just finished the whole series in no more than 3 days and fall in love with Webflow and team of you guys. this is beyond awesomeness. going to love each bit of learning and using of Webflow 🖤🖤🖤😍😍😍😍😍 thank you guys for making learning interesting.

[@Webflow]

We're glad to have you in our community. ❤️ Keep learning and building great things!

[@EgyptMadeEasy]

First time I seoe a company has the best youtube tutorials on its own products. love it

[@ittmoutsourcing]

Awesome tutorials and the way you present them makes them Awesome x 2 :)) There are few words that can describe how much i have learned and how much i have laughed watching Webflow tutorials Astounding is oNe of them

[@Lois38isere]

That's some premium teaching here, good job !

[@Webflow]

Glad you think so!

[@zhimmithee]

Like @Kickshot said! I can’t tell you how many tutorials and books and videos I’ve seen and read attempting to explain what this video just explained. Even if someone decides not to use the web flow platform the HTML and CSS education you guys provide is hands-down the best I’ve seen. Maybe it’s just the way I learn. Who knows?. Excellent audio. Excellent video series. Enjoying the platform.

[@mthornton9601]

They need to change section to have a tag of section by default. They do add a hidden class id of section, they should show this or have an "all sections" so you can configure. When you edit all you are doing is adding a second class which is extra code. I do like the icon to show its a section but I would recommend to use a div, give it a class of section, give it a tag of section and configure it as your default.

[@BB-wh1nr]

Your tutorials are AMAZING!

[@Ivanmartinezalvear]

Thankssssss I was very confused about this now everything make sense

[@user-ik8vy1rg8f]

Very high quality video. Makes me excited to jump into web design again. Affinity Software (Adobe alternative) also makes great tutorials.

[@mandlankosi2160]

I don't know if I would've finished the course if it wasn't for this guy. You end up laughing even if you struggle to understand some things, cause of the humor/ irony and jokes.

[@Mehereeee]

Just a goated explanation, absolutely loved it :)

[@eaxel987]

Very clear, thank you.

[@Pencilneckgeek216]

I think it's funny that they barely touched on the only real advantage of using a container or section - the different icon it gives the item in the DOM. It's nice to be able to see at a glance that the section and container divs are your main content wrappers. Other than that, there are no advantages, but there are a few disadvantages.

[@dan110024]

How is this guys voice so mesmerizing?

[@ihajo]

I tend to avoid the use of container and use a normal div, for some reason when i use flex on a container some of the flex alignment doesn't work properly

[@rocair4220]

mama mia

[@mattlillis1387]

This video was very helpful for me

[@diwakardayal954]

Top notch quality video

[@Chadthaniel]

Haha "I had no idea bleach was..." hahaha right in the middle of full concentration, trying to commit hierarchy and the displayed use case to memory and then BAM. So good.

[@seenuz1]

Awesome presentation 👌😎

[@jaredlank]

Am I confused or at one point was the container element width not editable?

[@adilshoaib3673]

Yes it is not directly editable unless you assign a specific class to it.

[@aronfischer8930]

You guys changed it now, wasn't misunderstood at all.... Now the only difference between the container and div is the way your "supposed to use them"

[@MikeShamberg]

oh webflow how i love thee

[@grinkevych]

by the way, what music is used here?

[@cookies6455]

I don't know if anyone will read this. But I really can't figure out why all design, all elements that are present in the desktop-version disappears in mobile version? Why does it work on all different devices on these tutorials, but when I try, most of the elements added to desktop version are gone when I click on mobile portrait. How do I fix that? If anyone know this, please enlighten me!

[@Webflow]

Here's more information on responsive design: university.webflow.com/lesson/intro-to-responsive-design Hope this helps :)

[@rmcellig]

So I don't have to use sections or containers when designing a page? Just for example, dragging just a paragraph and audio player is acceptable?

[@Webflow]

Totally acceptable! Sections, Containers and Div blocks are super helpful when you want to nest multiple elements into one element, where you can affect the layout and positioning for them at once instead of individually.

[@rmcellig]

@@Webflow thanks so much for clearing this up for me!! 😀

[@sahidstudio952]

I like this guy 😂

[@Pivotification]

lmao I love the little jokes and really like these tools!

[@christopherkirkos1790]

Hilarious. Really good content. Thanks.

[@HoaiNam9117]

thank you

[@124068480]

Can you drag and drop to move the position of containers?

[@Webflow]

Hi Alex! You can drag and drop the container on the canvas then use the positioning controls on the right side of Styles panel to move the containers around.

[@hyweltthomas]

Maybe I'm stupid, but I can't tell the difference between a container called Container and a div called Container, they are just elements with classes aren't they?

[@TribuOlaf]

yes, that is correct.

[@hyweltthomas]

@@TribuOlaf Makes you wonder why it exists at all. I haven't used containers for years, I can't see any reason to start...!

[@TribuOlaf]

@@hyweltthomas agree. From a theoretical point of view, there's no reason. Now, from a practical point of view, I can understand that for some people, it makes things easier.

[@hyweltthomas]

@@TribuOlaf I'm not sure how.

[@TribuOlaf]

@@hyweltthomas I do.

[@voss779]

max-width changed my perception of the container.

[@Webflow]

Us, too!

[@user-ig3uz6im9f]

Why is this edited so majestically

[@user-ik8vy1rg8f]

4:04 - Hilarious break.

[@DanBorgia]

We can set max-widths on containers now?? Yaaay!

[@Webflow]

We’re JUST as excited!

[@autocosm]

@@Webflow Game changer

[@joeygarner1636]

I don't think this video clarifies the differences between divs and sections. I would like to see examples of why a section would be used instead of divs. Seems like divs can do everything. And whatever benefit there is to sections, I think Webflow should just combined divs and sections into one in a future update, because currently it's very unintuitive. In some ways, actually writing out the HTML and CSS is more intuitive; don't have to navigate the organized chaos that is the Webflow UI.

[@matteomorettoo]

After this video... I'm gonna use Containers I guess : )

[@babakfp]

The Container needs how have padding right and left in the mobile view.

[@01pigoso]

I just use Divs for everything and its OK.

[@PswACC]

Sections don't come with a semantic tag out of the box. That doesn't make sense. The container shouldn't have padding as it changes the content size. That padding should go in sections. You also wouldn't drag handles to set padding. You would create clamp functions to control section padding making that spacing automatically responsive without media queries. You would add the clamp functions using Tokens (variables), something Webflow currently doesn't support. All this dragging of margins and padding only creates inconsistency in your designs. And why don't sections already come with 1 a semantic tag and a container to hold the content?

[@Webflow]

Thank you for your honest feedback here. I saw your other comment about this and have already forwarded it to the team.

[@Webflow]

I'm happy to report that now, when you drag in a Section onto your canvas, the Section element will automatically have the Section HTML tag applied to it.

[@PswACC]

@@Webflow Thanks for the update. Let me know if your team decides to add token support in the fields.

[@cordeirovitor]

Please, fix the container. It is bugged. I was doubting my entire life decisions and almost became a fisherman in Iceland because I couldn't use it as flex and justify its child elements as "Space between". Then I tried on a simple div. And it worked. I don't use container anymore. I am healed. Fix it before there are no more fishes in Iceland.

[@Webflow]

Okay, first off, there's nothing wrong with becoming a fisherman in Iceland. It's a beautiful country, a noble profession, and there are (for now) enough fish to fish. Second, thanks for pointing this out. We agree 100% about the Container needing enhancements to function more consistently when compared to a Div block. For now, like you've done, Div blocks are the best option for more advanced use cases. However, we definitely look forward to improving this in the future, so stay tuned! Thank you, Vitor!

"It's OK, we all do that" xDD

[@josh-dane]

4:00 HAHAHAHA

[@bitb22]

Are you the hermit collective?

[@pixelmixel]

Welp time to rebuild my website, thank you.

[@KingPower4Ever]

Chlorine XD