Let's finish up with the portrait view. 1
Almost everything is overflowing here. 2
But we can fix all these with similar measure we used on previous views. 3
First, let's make more space by shrinking padding 4
even more, to 30 pixels. 5
Same on the Navbar, 6
on a Navbar the brand block has a default padding applied to it. Desktop and tablet doesn't have this, 7
but mobiles do, 8
so let's remove that padding. 9
Actually I forgot to notice this on the landscape view, it's there as well, so let's remove that from there. 10
Now we just need to shrink the size of the content. First, if you have a look at the left block, 11
you'll see it has a minimum width of 300 pixels on it. 12
So it refuses to shrink beyond that point. 13
Let's remove that minimum and set it to auto. 14
Second, let's remove the right margin that set on the left block. 15
We have this margin for side by side layout, but here with the vertical alignment, we don't need it anymore. 16
And let's decrease the size of the headline font. 17
The thing with the headline is that on the smallest, narrowest screen we have to make it very small. 18
Otherwise, we get one word per line, which is not ideal. But if you check the super narrow screen, it's 19
for old Android phones. The web usage of these screen sizes are very small, 20
I've checked the statistics and they don't even seem to make 1%. 21
So most of the time, I don't go out of my way to make it perfect for these screen sizes and sacrifice 22
more common screen sizes. 23
But there is a way to make it close to perfect for this entire range. Instead of pixels, 24
we can use a responsive units for the font. 25
In this case, VW for the Viewport Width. If we give the font about 14 VW that should shrink and grow nicely 26
with screen widths. 27
Now for the buttons. With buttons, we can change the display setting. 28
So instead of them sitting next to each other, they can go on top of each other. 29
Remember which display setting does that? Display Block. Which is going to stretch them edge to edge. 30
To finish them up, 31
we can set a maximum width, then remove that left margin and add a top margin to create a separation. 32
And that's it. 33
Our hero section is sort of done, we will style the navigation bar in the next video.