And we're back. 1
Now, let's give this Div Block the same blue color from our designs. To grab the exact blue color from Figma, 2
select the color box or a background rectangle and then copy the code from the fill color. 3
If you can't select the background rectangle, don't forget to check 4
maybe you have locked the layer. Because I know, this is what I've done inside the tutorial, so you might 5
have locked it as well. 6
So this the HEX code, which we can copy and use it on Webflow. And it's going to bring exactly the 7
same identical color there as well. Inside Webflow, go to styles panel and scroll down to find a property 8
called Backgrounds. 9
There is the same field for the HEX code. So just paste your code in there. Always starts with a hash sign. 10
But you don't have to copy that. 11
If you do, make sure to replace existing hash sign too. 12
Now we need to give our Div Block a similar size as our rectangle in Figma. 13
And this is where things work a little different compared to Figma. 14
The reason is that websites are responsive. 15
They can grow and shrink based on screen sizes. In Figma 16
everything has a fixed position and fixed size regardless of the screen or content. To start with, 17
we do have similar controls like we do it in Figma. 18
You have Width and Height. Where you can put exact values as you would put in Figma. 19
We can't drag and resize a rectangle from the canvas, like we did in Figma. 20
We have to input values in these boxes. 21
We can put an exact pixel values. By grabbing them right from Figma. For some elements, 22
this might be a fine thing to do. 23
But for the background box, it isn't. Because it's not responsive 24
If my screen is wider than that value, then I get this white gap. Because I've made the blue box only 25
1400 pixels wide, whereas my screen, is wider than that. And if the screen is smaller it's still no 26
good, because then the box overflows. 27
You see those blue lines? Those are the boundaries of the blue box. And they are going off the page. 28
Often exact pixel values aren't any good in Webflow. 29
OK, then what is a good option? 30
If you press on this PX value here, it will show you all the units you can input in these fields. After 31
pixels we have a percentage. With percentages, we now enter a responsive web. It's a responsive value in 32
response to the size of the parent. If we put 50% width of our box, it's going to take 50% 33
of its parent element. And what's the parent of this element? If we check that on the bottom navigator, 34
we can see that the body is the parent. The body of any website is responsive and it's sized by the browser width. 35
This means 50% of the body, is 50% of the browser. So, if we shrink the browser width, 36
and we can do that from here by dragging, we can see that our blue box automatically shrinks as 37
the body shrinks. And there is no horizontal scroll. 38
The next unit is EM. We're going to skip this one because it's a unit that is based on the font size 39
and I never found any use for it, in the context of widths and heights. So we'll do just fine without 40
it. 41
VH and VW on the other hand, are important and very useful units. 42
They stand for Viewport Height and Viewport Width. Viewport is same as the browser size. 43
For example, as we drag this handle here, we can see the change in viewport width. Or the browser width. 44
Shown directly in pixels. 45
So that would be Viewport Width. 46
Similarly this is the Viewport Height. 47
These units work in percentage so 100 VW is 100% of the Viewport With. And 50 VH is 50% 48
of the Viewport Height. 49
Let's drop another box inside so we can see this in practice better. 50
The yellow box is sitting inside the blue box. 51
If we use percentage values, the yellow box will resize relative to the blue box. Because it's the parent. 52
So 50% and 100%. So100% height covers 100% of the blue box height. Which has its 53
own value of 600 pixels. 54
Now, look what happens if we put 100 VH instead. It covers an entire visible screen. 55
It even goes outside of the parent's borders. 56
The same thing applies to VW. 57
100% makes it stretch until the edges of the parent element. But 100 VW makes it stretch all the 58
way to fill the entire width of the visible screen. 59
To note, we usually use these values to their corresponding field, so VW in the width field and VH for 60
the height field. Although that doesn't mean you cannot switch them around. 61
Usually, there is no need. But there are some rare cases that you might want to do that. 62
Here's another cool demonstration of comparing percentages to a viewport units. 63
We have identical boxes in the above example. 64
Let's give a yellow box 50% width. And on the yellow box below. 65
Let's give it 50 VW. 66
Right now they're identical. 67
Why? 68
Because the parent blue boxes stretch from edge to edge. 69
But let's give a top blue box a width of 900 pixels. As expected the yellow box shrank with it, to 70
make 50% of the blue boxes with. 71
But see what happens on the bottom version when we give the blue box 900 pixel width. The bottom yellow 72
box didn't change shape, because it's relative to the browser size. 73
And as you change screens and shrink the browser, the bottom yellow box shrinks with it. Because it needs 74
to maintain 50% of the viewport no matter what. 75
The last unit is auto, meaning auto-sizing. 76
This is default value in Width and Height. When the size is set to Auto in the height, the size of the 77
element will change based on how much content is inside it. 78
For example. Let's set the Height to Auto on our blue box. 79
It disappeared. Because it's empty. And when it's empty and it's auto, 80
that means it has 0 pixel height. 81
Let's put some elements inside. To add something new inside an existing element, have that element selected 82
and Webflow will drop it inside. 83
When you click something from the new elements panel. 84
If I have a section selected it will drop inside. 85
But if you don't want it inside any other element then select body. 86
So it will kind of drop outside on the general canvas. 87
If you want, 88
you can also drag elements directly on the canvas from the Layers Panel, not the Layers Panel, but the 89
Elements Panel. 90
But that's not usually what I do. 91
I like the other way, but up to you. 92
Which one you want to, prefer. 93
If you want to drag, your drag. If you want to just click, click. 94
And so as you add more elements inside the Div Block, it will stretch. 95
If we set a specific pixel height, then the Div Blog will abide to that height no matter how much things 96
you stuff inside. The elements will just overflow from it, just like your garbage bin when you're too lazy 97
to take it out. 98
As for the Auto on the width, the box will stretch to the edges of its parent. 99
In this case - the full page, because the parent element is the body. 100
Finally, we have minimums and maximums. 101
These rules work in conjunction with the regular width and height. 102
It's an extra rule to set floors and ceilings on our elements. 103
For example, if we set the height to Auto, the blue box will stretch based on the content inside. 104
But if we set a maximum height, then it will stretch only until that point. 105
Minimums and maximums are super useful in many different scenarios. 106
For example, if we have a card element like this, where we want to put some content. It can be information, 107
form, pricing whatever. We could set an exact height on it to match our content. 108
Just like the way we would do it in Figma. 109
But because web is responsive, the size of the content can change from screen to screen. And then we're 110
going to get something like this. A better way is to use minimum height, instead of the exact height in 111
this case. 112
If we put minimum 400 pixels, we'll make sure that the box doesn't shrink, because there 113
is not enough content inside. 114
And we also make sure it grows when content grows with it. 115
Same goes for the width. 116
Setting 400 pixels 117
look good here, but if we shrink it, we get the overflow. And it's going to stubbornly maintain as 118
400 pixels. 119
A better option is to set 400 maximum width. 120
This means it will not stretch more than 400 pixels no matter what. But it will shrink below that, 121
if there is a necessity. 122
So let's see now what value and units do we need to enter, to make that box look like our design. 123
For the width, 124
it's obvious, right? 125
We're gonna go with Auto, because we want it to stretch from edge to edge. 100% width would bring 126
us the same result 127
in this case. Often in web design there are multiple ways to achieve the intended result. 128
Sometimes they are equally good, but sometimes one might be slightly more superior. With practice and 129
some failures, 130
you'll soon learn which is better. 131
In this case, Auto is better because it's default and it means no extra code. 132
Here is a pro Webflow tip. To return any property to its default value, hold ALT or OPTION key and CLICK 133
on the property. 134
It will clear all the changes that you have made. And return to the default values. 135
It's a very handy shortcut. Another tip, if the property is in blue, 136
it means you have changed it. When you're facing some sort of a bug, trying to figure out why something 137
isn't acting in a way it should. 138
You can easily scan this to identify what properties are applied. And what could be contributing to the 139
issue. When it's orange like this, it means we have changed the default values. Although not on this element 140
directly, but on one of the parents. In this case on the body element. 141
In other words, it's being inherited from the body element. 142
Again this a great way to identify where are some style is coming from. 143
Okay now for the height. Based on what we have learned, we know that we cannot use an exact value like 144
in Figma. Because when screen expands or shrinks on to a mobile, it will not adopt. 145
So how can we make it adaptable? 146
We have two solid options. 147
First, we can keep it Auto and let the content define its size. 148
And second we can use VH, 149
the Viewport Height. 150
Since we didn't put our content yet, 151
let's try this second option, 100 VH. Meaning 100% of a visible screen. 152
This means no matter how much we shrink or expand our browser, the box will adapt instantly to match 153
the visible screen. 154
But if our browser is too small, then sometimes blue box might not be enough for our content. And content 155
will overflow from the box. 156
So, why is this happening? 157
Because the blue box has a defined height. It doesn't stretch with content and that define height is 158
only as tall as the browser window. 159
So, how can we fix this? 160
We know that, to have the parent box stretched to accommodate its content, we need to use auto-sizing. 161
Right? 162
This way we make sure that blue box grows with content. And the 100 VH value we can put as a minimum 163
height. 164
Now the blue box will be at least same height as the browser, but not smaller than its content. 165
That's a perfect arrangement for us. 166
So to recap. We have pixel values, to input exact fixed dimensions. 167
We have percentage values, to size an element relative to its parent. 168
We have VH and VW two size elements relative to the browser size. And we have minimums and maximums to 169
set floors and ceilings on elements.