0
1
00:00:02,750 --> 00:00:04,190
And we're back. In this video,
1

2
00:00:04,190 --> 00:00:07,820
we're going to adopt hero section to the different devices.
2

3
00:00:07,820 --> 00:00:11,010
There isn't a lot that needs to be done, so it should be quick.
3

4
00:00:11,030 --> 00:00:13,360
Let's shrink the height of the heroes section on the tablet.
4

5
00:00:13,370 --> 00:00:17,590
It's too tall in this case. Something like 680 pixels should be good.
5

6
00:00:17,840 --> 00:00:25,930
And we need to adjust the margin of the content, so it's centered again.
6

7
00:00:25,970 --> 00:00:27,610
130 pixel looks good.
7

8
00:00:30,700 --> 00:00:33,250
Moving onto a mobile landscape.
8

9
00:00:33,250 --> 00:00:37,750
At first, it looks like there is nothing that needs fixing here. But we can't forget that we're not seeing
9

10
00:00:37,750 --> 00:00:39,450
the true mobile landscape here.
10

11
00:00:39,460 --> 00:00:41,800
This is too tall. To visualize this properly,
11

12
00:00:41,800 --> 00:00:44,300
the best is to check it on an actual mobile.
12

13
00:00:44,470 --> 00:00:50,220
But we can shrink the height of the browser to give us a rough idea of what we are working with.
13

14
00:00:50,230 --> 00:00:53,390
This is something how it will look like. Nothing's visible here.
14

15
00:00:53,410 --> 00:00:55,860
Vertical spacing is crucial on mobile landscape.
15

16
00:00:55,930 --> 00:00:58,590
So we need to make our content snug and tighter.
16

17
00:00:58,600 --> 00:01:00,760
First, let's cut down on section padding.
17

18
00:01:07,280 --> 00:01:10,180
And remove the fixed height of the hero section.
18

19
00:01:10,190 --> 00:01:12,040
We want it to be automatic in this case.
19

20
00:01:12,050 --> 00:01:14,960
So to be only as tall as the content.
20

21
00:01:18,180 --> 00:01:23,120
Similarly, let's cut down on horizontal padding. On smaller devices spaces is scarce.
21

22
00:01:23,280 --> 00:01:32,150
I'd say 30 pixel padding on the sides instead of 60.
22

23
00:01:32,180 --> 00:01:36,600
Next, we should shrink the font size a little. Our default H1 size is 55.
23

24
00:01:36,650 --> 00:01:40,390
That can be a little too big for mobiles I'd go with 35 or 40.
24

25
00:01:40,400 --> 00:01:46,910
Remember that heading style is coming from the H1 tag. To edit H1 tag on all mobile landscape, first, remove
25

26
00:01:46,940 --> 00:01:53,060
whatever class is applied. And then from the dropdown, select all H1 headings. You should get that same
26

27
00:01:53,060 --> 00:01:54,740
landscape icon on the left.
27

28
00:01:54,830 --> 00:01:55,760
That's important.
28

29
00:01:55,760 --> 00:02:02,360
This way we know that we are affecting all H1 for mobile landscape and down. And not tablet or desktop.
29

30
00:02:10,390 --> 00:02:12,820
Once done, we can put that white class back.
30

31
00:02:16,820 --> 00:02:21,710
One last thing for the landscape view. The content and background image are interacting now much more.
31

32
00:02:21,800 --> 00:02:28,190
In the above versions content is on a blurry plain area, but here it's covering the model's face.
32

33
00:02:28,190 --> 00:02:30,380
This makes text difficult to read.
33

34
00:02:30,380 --> 00:02:32,600
First, let's move the word to the next line.
34

35
00:02:38,830 --> 00:02:39,730
But that's not enough.
35

36
00:02:39,820 --> 00:02:42,850
So we're going to add a dark overlay on the background image.
36

37
00:02:51,450 --> 00:02:52,770
30% seems enough.
37

38
00:02:56,230 --> 00:02:57,670
And that's done for landscape view.
38

39
00:03:03,550 --> 00:03:05,840
So portray it needs a couple more things.
39

40
00:03:05,930 --> 00:03:11,270
First, let's change the direction of the form to vertical, so that field is on top of the button.
40

41
00:03:11,270 --> 00:03:14,270
This is quite easy because we have set this form as a flexbox.
41

42
00:03:14,270 --> 00:03:16,800
So all we need to do is just switch the direction.
42

43
00:03:16,880 --> 00:03:19,070
Make sure you're selecting the correct element.
43

44
00:03:19,070 --> 00:03:27,360
There is form and form block, we haven't touched the form block it's unstyled.
44

45
00:03:27,510 --> 00:03:38,880
Second, we need to fix the hero background.
45

46
00:03:38,930 --> 00:03:43,850
This is where that custom positioning comes in handy. Because none of the preset alignment work for us.
46

47
00:03:44,870 --> 00:03:46,910
I think 55% does a better job.
47

48
00:03:59,900 --> 00:04:00,220
okay.
48

49
00:04:00,230 --> 00:04:06,890
Let's check the fluidity. Oops, the field isn't stretching all the way because it has a max width.
49

50
00:04:07,030 --> 00:04:11,700
So, let's remove it in this case and set it to none. That will make it as wide as the parent.
50

51
00:04:11,710 --> 00:04:16,240
Keep in mind that any style changes that we make on these versions, only effect downwards and not
51

52
00:04:16,240 --> 00:04:17,660
upwards in the hierarchy.
52

53
00:04:17,680 --> 00:04:23,710
So, this field is only going to be reflected on the mobile portrait and not on landscape, tablet or desktop.
53

54
00:04:23,800 --> 00:04:25,150
All done for the hero section.
54

55
00:04:25,150 --> 00:04:29,370
Let's give it a go in the preview mode, making sure everything is looking nice and working properly.
55

56
00:04:38,940 --> 00:04:39,480
Excellent.
56

57
00:04:39,490 --> 00:04:42,140
We'll continue with following sections in the upcoming videos.