Let's continue with our design and add the content to the hero section. 2
We need a heading, a paragraph and buttons all of these we can add from Elements panel. Make sure that 3
they are inside that blue section. Remember why we put them inside, right? 4
Because web works on The Box Model - everything's going to go inside something. 5
Okay now let's put our copy inside these text elements. 6
Just double click on the element on the canvas and start typing or copy paste from the design file. 7
I'll explain in a bit why there is this new white gap on top of the blue box. 8
New elements in Webflow are usually jammed one after another and stuck to the edges of their parent. 9
This is how HTML behaves by default. But that's not how we want things. 10
We want to move them around and create spacing between them. So, how do we do that? In Figma 11
that's easy. 12
You just drag the element where you want it. But on web pages, that's not possible. 13
These elements can't actually be moved or dragged around wherever you want on the page. 14
But CSS has a special trick for this. 15
It's called Padding & Margins. 16
We can find that under a Spacing category on the Properties panel. Padding adds space inside the element. 17
And margin adds space outside of it. 18
Let's take our button for example. By default, Webflow has applied some padding to it. When you hover over 19
the padding property, 20
it highlights the space on the bottom, so you can see it visually. Values, in this case, are set in pixels. 21
9 pixels on top and bottom, and 15 on the sides. 22
You can increase or decrease either by dragging the handles. 23
Or directly in putting the value, like 100 pixels. 24
Here's a pro tip. If you hold ALT (or OPTION) key, while you drag the handle, it will automatically apply 25
the same value on the other side. 26
So top and bottom together, or left and right together. 27
And if you hold SHITF, then it will apply same value to all 4 sides at the same time. 28
Similarly, on the Margin, only difference is that space is being applied on the outside. 29
So we can pull our elements wherever we want them to. 30
And so this way, we can add extra space on either of the 4 sides of that element, which will then kind 31
of push them from their original place. Just like in sizes, we have all other units besides pixels. Although, 32
rarely we would use other units for Padding and Margin. Pixel units are usually the way to go. 33
So that white space on top of the blue box is actually the Margin from our heading. Just like the button, 34
Webflow adds a default margins on many of the elements. 35
If something is acting oddly, check the styles panel for default values. They usually hold the clues. 36
In our case, let's apply Margins and Paddings to match our designs. 37
We already know these values. Inside Figma, select the object and hold Alt (or Option) key and move your 38
mouse around, to see distances between the selected and other objects. 39
For example, we can see that the content is 140 pixels from the left edge of the frame. And we have 40
290 pixels on the top. 41
How do you use this information? 42
We can apply the same Padding to our blue box. 43
Now, depending on the browser height or screen, 44
this 290 pixel might not work at all. On a smaller browser 45
height, 46
this 290 pixels is too much. 47
The web isn't static like Figma and we need to think of values that will be responsive. 48
So, what do we want to achieve here? 49
We want this content to appear more or less in the center, don't we? 50
Regardless of the screen size. 51
Just like we did in our designs. 52
If we use exact pixel values, it's going to look very different from screen to screen. On shorter browsers, 53
the content is going to look like it's sinking on the bottom. But on the taller browsers, it's might be 54
too little. 55
And the content might look like it's too much on the top. 56
So instead, we can use VH, Viewport Height unit. 57
This will automatically calculate the Padding. And if screen size shrinks or grows, the padding will 58
shrink and grow with it. 59
Sometimes, it will need 20 VH, but sometimes something else, depends on the content that we have. 60
But in this case, something like that. 61
Now, if we shrink the screen a little too much, you can see that content is being squeezed on the bottom. 62
That's because we haven't added the bottom padding. When screen is large, it's floating on the top and 63
there is space on the bottom because we gave our blue box a value of 100 VH. Stretching it to 64
fill the entire visible screen. But when that visible screen is really short, 65
then there is no space left on the bottom. 66
Same thing we can do here, so we can add the same exact VH value to the bottom padding. 67
This will make sure we have good spacing both on top and the bottom, 68
no matter how we shrink or grow the browser. 69
Okay. 70
Now let's add Margins between the objects. 71
And let's remove that extra 20-pixel margin that's on top of the heading. Because it's adding to the 72
already existing padding, that's on the hero section. 73
This layout arrangement seems like we're on the right path. 74
We checked vertical responsiveness. But what happens if we check these on different widths? 75
This 140-pixel left padding doesn't seem like a good idea anymore. 76
It's pushing content too much to the right. 77
We could fix this and set individual paddings for each screen size. Or maybe even use the responsive unit 78
for the padding like VW for the viewport width. 79
But the most common way, and the best way, and best solution for this, to use a container. In our designs, 80
most of the elements are sitting inside the limits of our grid. 81
This gives us an invisible container, which is centered in the middle. And all those elements are sitting 82
inside. 83
This is how most websites are laid out as well, right? 84
It has a center layout and they place everything inside this layout. 85
Unless it's background images or some unique elements. We can achieve this layout by... you guessed it... with 86
another box. 87
So we'll put another box inside the blue box. And place our content elements inside this. 88
We have to drag the elements one by one. 89
There is no option, at least not yet, to kind of select multiple elements at the same time 90
and drag them altogether. 91
Now we're going to remove that left padding from the parent blue box. 92
First, we're going to apply width our container. In Figma, 93
we can measure the exact width of our grid. It's one 1160 pixels. 94
But the fixed width isn't gonna work, because it's not gonna to be responsive. 95
So when the browser shrinks and it's narrow, it's not gonna adjust. 96
So we need to instead apply maximum width. This way, it will shrink with a browser, but it's not going to 97
expand beyond those maximum pixels. 98
Lastly, we need to center it. To center elements in Webflow. 99
We need to apply auto Margins on the both sides. 100
When you apply Auto Margin, the box takes up the width or maximum width that we specified. And then, the 101
rest of the space is split between the left and right margins. Which basically centers element. 102
Auto margin works like a spring, that pushes the elements in the middle. 103
This sort of container box provides the best solution. 104
It centers the content in the middle layout, regardless how wide is the browser. 105
Even if someone was looking at our website in a movie theatre screen. And it shrinks with a browser 106
too, while maintaining it in the center. Although, now that we don't have any padding on the sides, you 107
will see that it's going to be squeezed and kind of touching the edges. Because we're already using auto 108
margins for our container box, 109
we can't really add extra information to it. But we can do something else. 110
We can add padding either inside of our container or to the parent blue box. 111
This will push the content away from the sides. Whether you add padding to the container or the blue 112
box, doesn't really matter. Its exact, 113
the result is the exact the same, but I think it's a little better to add it to the blue box parent element. 114
Now, this gives us the center layout that is responsive and perfectly adjusts to all the screen sizes. 115
And when we shrink it, it's not squeezed to the edges. A couple of rules with auto margins. For it to 116
work, the element needs to have either a specified width or maximum width. 117
This is what CSS uses to calculate the remaining space. Without any fixed width, the box has auto width 118
size. And what does that mean? 119
It means, it's supposed to stretch from edge to edge. 120
There is no leftover margin to be used. But when we add maximum width, now there is something to be calculated. 121
Also, if you apply auto margin only on one side, it's not going to center the element. Why? Because it's 122
going to take that max width and then fill up rest of the left side only, 123
not the right side. 124
Another thing to keep in mind is that auto margin doesn't work vertically. 125
It doesn't work even if we add maximum height. 126
This is not a Webflow limitation. 127
It's how it works with the code. 128
There is a specific reason for this. Something to do with the way browser does the math for the auto 129
margins, but we don't have to stress about this. 130
There are other ways to center objects vertically. 131
Webflow actually has a default container element. And it works in exact the same way. 132
It's still a Div Blog with these properties applied to it. But I never use their container, because it 133
has a max width, which is not editable. 134
If I'm not mistaken, I think it's 950 pixels maximum. Which I find very narrow and 135
limiting so I just build my own container. A couple of extra steps, but I get better control on my designs. 136
I suggest for you to do the same. 137
Make your own container. 138
You'll learn better how things work. And you'll avoid the moment when you build an entire site and at 139
some point decide that you'd like a wider container. 140
That's how we move things around in Webflow. 141
And that's exactly the way how you would move them around, 142
if you were using HTML and CSS and coding it. We have padding which adds spacing inside the element. And we 143
have margin that adds spacing outside of the element. 144
The margins from different elements work together. So 60-pixel bottom margin of our paragraph. And 145
10 pixel of the top margin on the bottom, would make a total of 70 pixel spacing between them. 146
Same goes for the padding of the parent element. 147
It's going to add to the margin of the child element. And we have auto margin, which is mainly used to 148
center elements.