0
1
00:00:00,240 --> 00:00:02,170
All right. So let's start with a hero section.
1

2
00:00:02,190 --> 00:00:05,700
We'll go one by one for each device and optimize the style.
2

3
00:00:05,700 --> 00:00:06,980
First the tablet view.
3

4
00:00:07,080 --> 00:00:09,080
What issues can we identify here?
4

5
00:00:09,330 --> 00:00:12,980
We have the image that is shrinking too much because of not enough space.
5

6
00:00:13,170 --> 00:00:15,480
The content on the left has a minimum width,
6

7
00:00:15,510 --> 00:00:18,370
if you remember, so that means image is taking the hit.
7

8
00:00:18,450 --> 00:00:20,960
Then we have a Navbar that needs fixing.
8

9
00:00:20,970 --> 00:00:24,450
We'll have to see if we can actually fit our regular links in here.
9

10
00:00:24,540 --> 00:00:30,630
If not, we'll keep the hamburger menu and style it. The hero section is way too stretched. For two reasons.
10

11
00:00:30,630 --> 00:00:34,800
First, because of 100 VH we have applied to the section.
11

12
00:00:34,800 --> 00:00:37,890
And second, because of the similar 20 VH padding.
12

13
00:00:38,160 --> 00:00:40,550
Let's see if we can fit the navigation links.
13

14
00:00:40,590 --> 00:00:44,510
So how do we disable that hamburger icon and show the navigation links?
14

15
00:00:44,640 --> 00:00:45,840
We can do that from Navbar
15

16
00:00:45,830 --> 00:00:53,220
settings. Click anywhere on the navbar and go to settings. As you can see it says Menu icon: for tablet
16

17
00:00:53,250 --> 00:00:54,090
and below.
17

18
00:00:54,090 --> 00:01:00,290
If we move the slider towards the smartphones that will disable this from the tablet view.
18

19
00:01:00,570 --> 00:01:06,450
As a general rule, for user experience showing links is much better approach than not showing them. For
19

20
00:01:06,450 --> 00:01:09,120
obvious reasons it's easier to find and navigate.
20

21
00:01:11,900 --> 00:01:15,680
Real estate on tablets and mobile devices is very important.
21

22
00:01:15,680 --> 00:01:19,910
The spacing on these devices have to be much smaller than what we would do on a desktop.
22

23
00:01:20,150 --> 00:01:24,800
So let's remove that large padding that is applied to the section. Instead of VH,
23

24
00:01:24,800 --> 00:01:30,620
this time we're going to use regular pixels. Because it will give us more predictable looks. Say, 90
24

25
00:01:30,620 --> 00:01:48,360
pixels.
25

26
00:01:48,550 --> 00:01:49,070
All right.
26

27
00:01:49,070 --> 00:01:51,290
The overall spacing for the hero is pretty good.
27

28
00:01:51,320 --> 00:01:53,450
And we don't have bloated spacing.
28

29
00:01:53,450 --> 00:01:56,850
That's good.
29

30
00:01:56,860 --> 00:01:58,630
So what to do with a hero image?
30

31
00:01:58,630 --> 00:02:05,140
It's still quite small in comparison. The left content is too large and it's pushing the image. On desktop,
31

32
00:02:05,140 --> 00:02:09,690
we had enough real estate to be able to use such large headline, but here we don't,
32

33
00:02:09,700 --> 00:02:56,280
so we can start shrinking the sizes in the left block.
33

34
00:02:57,310 --> 00:03:00,280
So we did shrink the content, but the image is not growing.
34

35
00:03:00,280 --> 00:03:01,660
Why is that?
35

36
00:03:01,660 --> 00:03:05,090
Because we have minimum width settings applied to the left block.
36

37
00:03:05,090 --> 00:03:08,320
And even though content is shrinking, the box itself isn't.
37

38
00:03:08,710 --> 00:03:10,330
So let's change this minimum width.
38

39
00:03:15,810 --> 00:03:16,290
All right.
39

40
00:03:16,290 --> 00:03:17,400
That looks pretty good.
40

41
00:03:17,400 --> 00:03:21,240
Let's test the fluidity of this layout, by resizing our canvas.
41

42
00:03:29,370 --> 00:03:31,750
Great, it flows really well on the entire page.
42

43
00:03:32,130 --> 00:03:34,620
So the tablet layout for hero section is done.
43

44
00:03:34,620 --> 00:03:38,760
All the changes that we made has not been reflected back onto our desktop.
44

45
00:03:38,760 --> 00:03:40,920
It's still the way we left it.
45

46
00:03:40,920 --> 00:03:42,780
Now let's move to mobile views.