In this lesson, we’ll cover Webflow’s
most misunderstood element: the Container, which is designed to keep content from going
edge to edge, instead keeping it neatly bound towards the center...in a width you can define. So we’ll cover the basics of a container,
how to create custom widths and classes on our containers, we’ll cover padding (how
to add extra space inside a Container), we’ll talk about how to resuse containers to ensure
consistency and visual alignment across your project, and then we’ll cover the difference
between Sections, Containers and Div blocks. Enter: the Container. The perfect companion for a Section. When we place a Container inside a section,
it’s sort of in the way. But when we place content inside the Container,
notice how it narrows everything and keeps it neatly organized towards the center of
the screen. Now. That leads us to custom widths. By default, if you put stuff into the container
element, it’s automatically responsive. Content like paragraphs, headings — anything
that doesn’t have a fixed width will respond...responsively. But what if we want a wider container instead
of the default? Well, at any time, we can set a different maximum
width. We can start by adding a class to our container
- we’ll call it “Container” and let’s set the maximum width here to 1100
pixels. And now, it’ll still respond to the viewport,
but it maxes out at 1100 pixels. (Now...if things are getting too close to
the edge, we can always add padding on the left and right to add some breathing room
there. We’ll remove that for now, but we’ll come
back to this concept a bit later later). For now, let’s make sure our Nav container
(the container in our navbar) ...matches the new Container class we just created. Now when we change something like the max
width? It affects all Containers that have the Container
class applied. But let’s add a larger breakpoint. Here’s one for 1920 — this is usually
for larger displays like an iMac or a Pro Display XDR...and the idea here? Is that things are pretty narrow. Maybe we want our container width to be more
appropriately sized for these larger displays. Max width? Make the change? That’s all we have to do. Now. Remember: always go back to the base breakpoint
to continue designing and building your project, because style changes cascade outwards (whether
it’s a max width on a Container or even something like the color of a button...those
things are styled on the base breakpoint, and those changes cascade downwards towards
smaller breakpoints, and upwards towards larger breakpoints.) And we can use our Container to add extra
breathing room (this is Part 3 by the way). With padding, if we look on mobile landscape
for instance, we can see our content is being pushed right up to the edge. And in some cases, we might want that. But for us, let’s go all the way back to
Desktop to make sure we have padding added on the left and right (we can adjust by holding
option or alt and dragging) — let's say about 40 pixels on the left and right on desktop. And that'll give us some nice breathing room
as we scale down. Maybe we want 20 pixels of breathing room
on the Tablet breakpoint (since we have less screen real estate), and on Mobile landscape
20 might be a bit heavy there — let’s drop to 10 pixels. Same on Mobile portrait, in each case, the
properties on the larger breakpoints are cascading down to the smaller breakpoints. Once we've styled our container just how we
want to, let’s go into our Project settings, where we can, of course, delete our project. But for those who want to continue, we made
Part 4. And because we already gave our Container
a class, we can apply that class to other containers we add to our project. And like we covered before, a change to the
styling on that class will affect all containers that have that class applied. And that leads us to our final section: Sections
versus Containers...versus Div blocks. Two questions: “When should we use each
of these?” And “aren’t they just variations on
a Div block.” We’ll cover the first part, and the second
part’s “yes,” but first, let’s look at a common hierarchy as it relates to Sections,
Containers, and Div Blocks: We have a Section, which is, by default, full-width. Inside the Section, we have a container, which
keeps everything inside neatly bound towards the center. That leaves only one kind of element we haven’t
covered: chlorine. And it turns out a lot of people don’t know
that bleach is just ... [Grimur] I had no idea bleach was chlorine.. [McGuire] [over] Chlorine,
right. So. We have a section which is a Div block that’s
full-width, we have a Container which is a Div block that keeps things neatly bound. And a Div block is anything else you want
it to be. Which means this: if we want a horizontal
divider between our heading and our paragraph? All we have to do is drag in a Div block. And we can set some properties here (let’s
give it a name to keep things organized — we’ll call this Little divider, but whatever your
thing is, that’s okay — people are very particular about their class names — we
all do it, it’s fine.) And on this class, we can set a color (we
can go in and set a background color on our Div block), then we can set a height (maybe
1 pixel). And of course we can set a width (maybe 50 pixels, or we can just set it to whatever we want). And after we do that, we can add top and bottom
margin to it — this creates some space or some breathing room in our design between
other elements and the Little divider. And now we can reuse this Div block anywhere
we want. Let’s paste another one of these after this
Heading here...and because we’re using classes, a change to this Div block (a change to our
Little divider class) will affect all Div blocks with that class applied. But it’s not just that. We can use Div blocks to organize things. We can put almost anything inside a div block
(all we’re doing here is dragging different kinds of elements into our Div block). And once we’re done with that, if we want
to further constrain the boundaries of all these elements? We can set a maximum width on the Div we just
added. And because its children are now being constrained
by those dimensions, they’re all matching the same maximum width. And that’s the big difference between all
of these. Aren’t they all divs by default? Sure. And that’s what a lot of designers and developers
will do: they’ll organize a series of Div blocks inside Div blocks to build a structure
that makes sense for their design. Most of the time, that means using Sections
to stack page content vertically (these are usually placed right into the page Body). And then Containers (or even just a custom
Div block that’s narrower than the Section and keeps the content inside legible and centered). And inside those Div blocks can hold and organize
other content inside the Containers. And to add vertical breathing room? A common technique is to add padding on the
top and bottom of the Section. Again, for all of this, you don’t have to
use a Section preset or a Container preset. That’s all they are: preset elements. And there’s no right or wrong way to do
this, as long as you’re creating clear, functional groupings for content on the page. So. We covered a lot here. We covered the basics, we talked about how
we can create a class on a Container and set our own custom maximum widths on different
breakpoints. We showed adding padding on the left and right
to add some breathing room between a Container and the edge of the viewport. We applied the Container class to other containers
to keep things consistent. And we reviewed the difference between Sections,
Containers, and Div blocks. And that’s an overview of Containers in
the Webflow Designer.
