0
1
00:00:03,110 --> 00:00:07,420
And moving ahead with the next section. For the tablet, it's quite easy,
1

2
00:00:07,420 --> 00:00:12,460
we just need to move that image more towards the left. When you click on it, you'll see that it has a
2

3
00:00:12,460 --> 00:00:13,470
negative margin.
3

4
00:00:13,480 --> 00:00:16,050
That's what makes it move out of the page so much.
4

5
00:00:16,900 --> 00:00:18,520
Let's decrease the negative margin.
5

6
00:00:23,810 --> 00:00:24,320
I think,
6

7
00:00:24,320 --> 00:00:25,830
this looks quite good.
7

8
00:00:25,910 --> 00:00:28,100
Minus 350 pixels.
8

9
00:00:28,100 --> 00:00:29,800
Check the fluidity and that's it.
9

10
00:00:37,130 --> 00:00:38,890
Now for the mobile landscape.
10

11
00:00:38,900 --> 00:00:40,430
Let's start by section padding.
11

12
00:00:40,430 --> 00:00:43,250
We've made horizontal padding smaller on the hero section.
12

13
00:00:43,280 --> 00:00:44,390
It's 30 pixels.
13

14
00:00:44,390 --> 00:00:47,540
We've never matched that with the rest of the sections.
14

15
00:00:47,540 --> 00:00:52,250
We can't make the change on this section directly, because it has a combo class applied to it.
15

16
00:00:52,310 --> 00:00:57,320
If we shrink the space it's only going to apply to this combo class and none of the other sections.
16

17
00:00:57,350 --> 00:01:02,900
So, what we can do is either select another section that doesn't have a combo class, like the next one
17

18
00:01:02,900 --> 00:01:08,240
for example. Or we can get rid of the combo class for a moment, style section and then put the combo class
18

19
00:01:08,240 --> 00:01:09,230
back in.
19

20
00:01:09,230 --> 00:01:10,550
But that's more complicated.
20

21
00:01:10,550 --> 00:01:12,230
So, let's just style the section below.
21

22
00:01:15,280 --> 00:01:18,310
And of course, that has applied the padding on the above section too.
22

23
00:01:21,480 --> 00:01:27,100
Similarly, we can change the value that is more appropriate and decrease it to something like minus 260 pixels.
23

24
00:01:27,330 --> 00:01:31,240
Again, check the fluidity.
24

25
00:01:45,330 --> 00:01:50,570
One more thing I'd like to fix here is the vertical padding on the section. On landscape mode vertical
25

26
00:01:50,570 --> 00:01:51,980
space is very limited.
26

27
00:01:51,980 --> 00:01:57,500
If you'd imagine that you're seeing this on actual mobile landscape, you'll understand that you will have
27

28
00:01:57,500 --> 00:02:00,720
some gaps where you're not really seeing much content.
28

29
00:02:00,740 --> 00:02:06,730
One thing to note about mobile landscape view, it's not just mobile landscape, but also some tablets and
29

30
00:02:06,730 --> 00:02:12,710
fablets, or whatever they're called. Because you'll see in the viewer it shows different
30

31
00:02:12,710 --> 00:02:14,090
sizes for different devices.
31

32
00:02:14,090 --> 00:02:18,220
So, it's not just mobile landscape in reality, but we call it mobile landscape.
32

33
00:02:18,230 --> 00:02:22,860
Just to make things easier.
33

34
00:02:22,890 --> 00:02:26,110
So we have 80 pixel vertical padding on our default sections.
34

35
00:02:26,190 --> 00:02:28,340
I'd shrink this to like 60 pixels.
35

36
00:02:28,500 --> 00:02:33,150
Just like we did previously, select a section that doesn't have a combo class and style that one.
36

37
00:02:43,370 --> 00:02:43,660
Okay.
37

38
00:02:43,680 --> 00:02:45,560
Moving on to the mobile portrait.
38

39
00:02:45,560 --> 00:02:47,670
The image on this section isn't even visible.
39

40
00:02:47,670 --> 00:02:51,270
So, what we're going to do is change the direction of the flexbox to vertical.
40

41
00:02:58,140 --> 00:03:03,440
There is another direction we can change, we can reverse the order inside flexbox. And having image first,
41

42
00:03:03,470 --> 00:03:07,960
makes more sense. Which is quite simple to do, just by enabling this reverse button.
42

43
00:03:08,150 --> 00:03:12,710
But let's give this a combo class first before we do this. Vertical direction is something that is fine
43

44
00:03:12,710 --> 00:03:14,050
to apply to the base class.
44

45
00:03:14,060 --> 00:03:20,150
It's going to be the main layout for most flexboxes on mobile. But the order is something more specific.
45

46
00:03:20,150 --> 00:03:25,850
So for that, it's best to have a combo class and not affect other flexboxes on our page. Because we also
46

47
00:03:25,850 --> 00:03:29,480
have a flexbox in the footer and that's going to reverse things there too.
47

48
00:03:29,990 --> 00:03:33,420
And now we can style the image. One issue is that image is too small.
48

49
00:03:33,440 --> 00:03:37,760
So, we should increase the size. Increasing the size of the image has some dos and don'ts.
49

50
00:03:37,760 --> 00:03:40,790
We can't change the width from the image settings.
50

51
00:03:40,820 --> 00:03:46,070
These are global image settings, so if we change the size here, it's going to affect on every single screen
51

52
00:03:46,070 --> 00:03:47,610
size.
52

53
00:03:47,810 --> 00:03:57,820
See now image is gone from the desktop. So, the ideal place is to style it from the styles panel. And in
53

54
00:03:57,820 --> 00:04:01,210
here there is another don't. Don't style the height.
54

55
00:04:01,210 --> 00:04:06,440
When you style the height, it doesn't preserve aspect ratio and you get a spaghetti image.
55

56
00:04:06,440 --> 00:04:08,050
The width values are the best option.
56

57
00:04:08,050 --> 00:04:14,170
But here too, some things will behave oddly. Depending on the situation either fixed width or minimum
57

58
00:04:14,170 --> 00:04:15,450
width works the best.
58

59
00:04:15,460 --> 00:04:18,550
For example, regular width value doesn't change the size.
59

60
00:04:21,450 --> 00:04:23,660
But the minimum width does a pretty good job.
60

61
00:04:24,760 --> 00:04:30,130
Not that this is a bug or some sort of a glitch, there is usually an answer to such mysterious behaviors.
61

62
00:04:30,130 --> 00:04:35,500
In this case, width doesn't do much, because there is a maximum width of 100%. Which is telling you
62

63
00:04:35,500 --> 00:04:38,170
to be only as wide as the parent container.
63

64
00:04:38,240 --> 00:04:44,290
It's basically overriding the width, but minimum width ignores that. Because it comes before the maximum
64

65
00:04:44,290 --> 00:04:44,640
width.
65

66
00:04:44,710 --> 00:04:46,230
Don't worry if you're not catching all of this.
66

67
00:04:46,240 --> 00:04:50,550
I don't usually worry too much about the reasoning, I just play with values and see which one works.
67

68
00:04:54,920 --> 00:04:57,590
All right, I would say 380 pixel looks good.
68

69
00:04:57,640 --> 00:04:59,610
Now we need to fix the negative margin.
69

70
00:04:59,660 --> 00:05:02,440
Maybe align the edge of the image with the content.
70

71
00:05:05,820 --> 00:05:07,620
Something like minus 90 pixels.
71

72
00:05:11,330 --> 00:05:15,570
And let's add some margin on the bottom.
72

73
00:05:15,630 --> 00:05:16,140
Perfect.
73

74
00:05:16,530 --> 00:05:24,030
Let's check the fluidity and we're good to go.
74

75
00:05:24,100 --> 00:05:28,000
I don't worry too much about the screen sizes less than 320 pixel wide.
75

76
00:05:28,450 --> 00:05:33,810
That's just such a rare appearance, especially for our target audience, who are modern teams.
76

77
00:05:33,820 --> 00:05:36,990
I don't think any of them own Nokia in 95.
77

78
00:05:37,420 --> 00:05:39,280
Besides that, fluidity looks great.
78

79
00:05:39,280 --> 00:05:41,470
We'll continue with the rest in the next video.
79

80
00:05:41,470 --> 00:05:42,070
Stick around.