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