So, what have we got here? 1
This is a flexbox that has columns inside. The columns have this percentage width applied to them. 2
Let's keep mobile views in mind when creating a solution here. 3
We will need some sort of vertical alignment. 4
We could go for vertical option from the flexbox, but that sets everything vertical even when there 5
is space on the sides. 6
A better option is to use a wrap feature. 7
We've discussed this option in flexbox video, 8
but let me refresh your memory. By default, flexbox tries to fit all children in one single line. Be it horizontal 9
line or vertical line. 10
But when we enable wrap option, then children will jump to the next line, or wrap to the next line one 11
by one, as needed. 12
Let's change the justify settings to the left or start. 13
Now let's tweak the columns. 14
There is this empty column, which was nice on desktop, but not needed for tablet and mobile views. 15
We would like columns to align to the left without extra spacing. 16
We can't remove this empty column because it's going to remove from the desktop as well. 17
But what we can do, is hide using styles. 18
Let's give it a combo class, so we don't mess with other columns. 19
And then from display option, select hide. The display non property hides the element and frees up 20
the space it was occupying. 21
What else? 22
The columns have the left and right margins. 23
So, when they jump to the next line, it's going to create this extra space. 24
Let's remove that left margin and only use right. 25
But make sure, to edit the column that has only a global class. 26
The first and last column have a combo class applied to them. 27
We used to fix some margins on the desktop. 28
That's pretty good. 29
And let's add a bottom margin, so the columns on the second line don't jam into the first line. 30
On smaller sizes, you'll see that they don't really wrap properly and instead the columns squeeze themselves 31
very tightly. 32
That's because they have the percentage width applied to them, which is fine on the desktop, but becomes 33
unnecessary in this sort of layout. 34
So let's get rid of it. 35
Now that column width is automatic. It grows with the content inside. And that makes the first column 36
too wide. 37
We gotta give it a maximum width, so it doesn't grow this much. 38
And that's better. 39
And the whole thing wraps nicely across all views. 40
One last thing we should tweak is the spacing between the copyright and the links. 41
I think 60 pixels will be much better. 42
Let's have the final look at the whole thing. 43
And that concludes our entire page development. In the next section, 44
we're going to go over finalizing our page. 45
Things like publishing, SEO and so on. 46
This doesn't mean that we're completely done with Webflow designer and the development process. 47
There is still more to learn things like CMS and forms, and interactions, and animations that can 48
make any website look so amazing and so fresh, and so modern, and so professional looking. 49
But all of those concepts we're gonna learn in other parts of this course. 50
One part we're going to learn them inside this big client project that we're going to do from start 51
to finish. 52
So you get this hands on experience on how to start everything with a client. With things like project 53
brief and wire framing, and designs, and then moving to Webflow and developing CMS, and blog Inside 54
Webflow. And then interactions and then finally delivering everything, publishing with a custom domain, 55
all of that stuff. 56
And also some parts I'm going to put inside the advanced part of this of course, because you don't need 57
everything. You don't need to learn everything in one single go. 58
So I put everything that is not essential skill and essential knowledge for you to start freelancing, 59
inside the advance part. 60
So once you've reached the final part of this course, which is advanced you already know everything that 61
is essential, and that can get you started with freelancing. And while you're freelancing, while 62
you're looking for jobs, you can also continue with the advanced parts. And kinda hone your skill 63
and get better at.