0
1
00:00:00,240 --> 00:00:02,150
Let's finish up with the portrait view.
1

2
00:00:02,640 --> 00:00:04,460
Almost everything is overflowing here.
2

3
00:00:04,560 --> 00:00:08,750
But we can fix all these with similar measure we used on previous views.
3

4
00:00:08,760 --> 00:00:11,390
First, let's make more space by shrinking padding
4

5
00:00:11,400 --> 00:00:13,200
even more, to 30 pixels.
5

6
00:00:17,450 --> 00:00:18,500
Same on the Navbar,
6

7
00:00:27,100 --> 00:00:32,810
on a Navbar the brand block has a default padding applied to it. Desktop and tablet doesn't have this,
7

8
00:00:32,810 --> 00:00:33,710
but mobiles do,
8

9
00:00:33,710 --> 00:00:35,150
so let's remove that padding.
9

10
00:00:38,700 --> 00:00:43,140
Actually I forgot to notice this on the landscape view, it's there as well, so let's remove that from there.
10

11
00:00:53,030 --> 00:00:57,750
Now we just need to shrink the size of the content. First, if you have a look at the left block,
11

12
00:00:57,770 --> 00:01:00,880
you'll see it has a minimum width of 300 pixels on it.
12

13
00:01:01,040 --> 00:01:03,380
So it refuses to shrink beyond that point.
13

14
00:01:03,380 --> 00:01:05,880
Let's remove that minimum and set it to auto.
14

15
00:01:06,260 --> 00:01:10,010
Second, let's remove the right margin that set on the left block.
15

16
00:01:10,040 --> 00:01:15,950
We have this margin for side by side layout, but here with the vertical alignment, we don't need it anymore.
16

17
00:01:16,100 --> 00:01:18,350
And let's decrease the size of the headline font.
17

18
00:01:26,180 --> 00:01:31,780
The thing with the headline is that on the smallest, narrowest screen we have to make it very small.
18

19
00:01:32,100 --> 00:01:37,770
Otherwise, we get one word per line, which is not ideal. But if you check the super narrow screen, it's
19

20
00:01:37,770 --> 00:01:43,320
for old Android phones. The web usage of these screen sizes are very small,
20

21
00:01:43,320 --> 00:01:46,660
I've checked the statistics and they don't even seem to make 1%.
21

22
00:01:46,680 --> 00:01:51,980
So most of the time, I don't go out of my way to make it perfect for these screen sizes and sacrifice
22

23
00:01:51,990 --> 00:01:53,450
more common screen sizes.
23

24
00:01:53,490 --> 00:01:57,960
But there is a way to make it close to perfect for this entire range. Instead of pixels,
24

25
00:01:57,960 --> 00:02:00,720
we can use a responsive units for the font.
25

26
00:02:00,720 --> 00:02:08,940
In this case, VW for the Viewport Width. If we give the font about 14 VW that should shrink and grow nicely
26

27
00:02:08,940 --> 00:02:09,870
with screen widths.
27

28
00:02:18,000 --> 00:02:21,990
Now for the buttons. With buttons, we can change the display setting.
28

29
00:02:22,050 --> 00:02:25,970
So instead of them sitting next to each other, they can go on top of each other.
29

30
00:02:26,130 --> 00:02:32,610
Remember which display setting does that? Display Block. Which is going to stretch them edge to edge.
30

31
00:02:35,890 --> 00:02:36,790
To finish them up,
31

32
00:02:36,790 --> 00:02:43,120
we can set a maximum width, then remove that left margin and add a top margin to create a separation.
32

33
00:02:43,330 --> 00:02:43,990
And that's it.
33

34
00:03:03,080 --> 00:03:07,400
Our hero section is sort of done, we will style the navigation bar in the next video.