0
1
00:00:02,720 --> 00:00:04,000
Picking up where we left of.
1

2
00:00:04,030 --> 00:00:07,920
We're going to tackle the responsive versions of these two sections from the body.
2

3
00:00:08,060 --> 00:00:10,130
We have to make some space in this section.
3

4
00:00:10,130 --> 00:00:12,390
There is not enough space for everything to fit.
4

5
00:00:12,410 --> 00:00:20,050
For starters, we can shrink the space between the image and the content say from 60 to 30 pixels. Next,
5

6
00:00:20,050 --> 00:00:24,030
we can let these images go off the page, in reality, just like the mockup above.
6

7
00:00:24,040 --> 00:00:25,630
There is no reason why we can't do that.
7

8
00:00:25,630 --> 00:00:27,520
We just need to set a negative margin.
8

9
00:00:30,850 --> 00:00:32,530
That actually looks pretty cool.
9

10
00:00:32,560 --> 00:00:33,750
Now we need to fix the cards.
10

11
00:00:33,760 --> 00:00:35,630
First of all, they're a little too big.
11

12
00:00:35,650 --> 00:00:37,420
They didn't shrink with a background image.
12

13
00:00:37,420 --> 00:00:39,820
So now they occupy too much space.
13

14
00:00:39,820 --> 00:00:46,680
Select the one that has a single base class and style that one, so changes apply to both of them.
14

15
00:00:46,760 --> 00:00:52,550
That looks about right. Now the position. Remember, they are absolute elements and they are moving certain
15

16
00:00:52,550 --> 00:00:54,370
amount from top and right edges.
16

17
00:01:02,530 --> 00:01:07,190
So there is a little issue with the responsiveness. On a wider screen inside the tablet mode,
17

18
00:01:07,210 --> 00:01:11,980
now the cards are little too small. And they would work better if they weren't that close to the edge.
18

19
00:01:11,980 --> 00:01:17,980
We can improve this if we use percentage units instead of pixels. Both for the size of the card and the position.
19

20
00:01:18,010 --> 00:01:20,110
There is no exact calculation we could do here.
20

21
00:01:20,140 --> 00:01:25,840
So, we can just go by eye and see what's the right percentage. And check how it grows and shrinks with a screen
21

22
00:01:25,840 --> 00:01:26,470
size.
22

23
00:01:33,580 --> 00:01:36,400
Nice, 45% width does a pretty good job.
23

24
00:01:36,470 --> 00:01:40,040
Remember how last time we had to change minimum width? This time,
24

25
00:01:40,040 --> 00:01:41,280
actually it's the opposite.
25

26
00:01:41,360 --> 00:01:46,910
The minimum width doesn't work, but the actual fixed width does. The actual width
26

27
00:01:46,910 --> 00:01:52,460
works fine, because it's not being overridden by maximum width, as long as the value smaller than the
27

28
00:01:52,460 --> 00:01:53,160
parent.
28

29
00:01:53,210 --> 00:01:58,670
See, this is why it's the best thing to do, is just to put the image always inside the image wrapper like
29

30
00:01:58,670 --> 00:02:00,720
a regular div block and style that.
30

31
00:02:00,740 --> 00:02:06,320
If you need to change sizes, or move the positions, or whatever you need to style, leave the image itself in a default
31

32
00:02:06,320 --> 00:02:10,150
positions, in default styles, but then style the parent wrapper.
32

33
00:02:10,220 --> 00:02:15,110
You'll save yourself from a lot of confusions, a lot of headaches. Alright, in a similar way we will fix the
33

34
00:02:15,140 --> 00:02:47,750
absolute positions using percentage values.
34

35
00:02:48,490 --> 00:02:48,790
Right.
35

36
00:02:48,810 --> 00:02:52,990
The responsiveness is great and let's make sure the animation is working good as well.
36

37
00:03:02,170 --> 00:03:02,770
Moving on.
37

38
00:03:08,470 --> 00:03:11,660
I think landscape mode is pretty good as is.
38

39
00:03:11,950 --> 00:03:13,860
I would just move the image a little to the right,
39

40
00:03:13,870 --> 00:03:16,000
so the more of the girl is visible.
40

41
00:03:34,680 --> 00:03:39,510
Now moving on to the mobile portrait. The layout here is already vertical.
41

42
00:03:39,510 --> 00:03:39,780
Why?
42

43
00:03:39,780 --> 00:03:44,640
Because we are using the same flexbox container as above. And when we styled it above the same vertical
43

44
00:03:44,640 --> 00:03:46,500
layout was applied to it.
44

45
00:03:46,500 --> 00:03:51,570
We just need to adjust the image here. I'd decrease the negative margin to something like minus 30 pixels.
45

46
00:03:51,630 --> 00:03:54,270
And add a little bit of space underneath,
46

47
00:03:54,270 --> 00:03:56,010
so it's not glued to the headline.
47

48
00:04:01,430 --> 00:04:03,340
And 0 pixels on the right side of it.
48

49
00:04:11,650 --> 00:04:13,840
That's all, the fluidity is looking pretty good.
49

50
00:04:16,670 --> 00:04:21,020
Let's now apply similar adjustments to the second section, starting from tablet.
50

51
00:04:21,020 --> 00:04:35,610
As we haven't touched any of it. First the image wrapper, we need same margins as above, but opposite directions.
51

52
00:04:37,190 --> 00:04:41,330
As you can see there is this overflow, because of the image that is going off the page.
52

53
00:04:41,330 --> 00:04:46,220
So we need to apply that combo class we already have for the overflow section.
53

54
00:04:46,220 --> 00:04:47,220
Easy peasy.
54

55
00:04:47,220 --> 00:04:52,160
Now the calendar card 45% width and 10% for absolute positioning.
55

56
00:05:00,820 --> 00:05:01,550
And that's all.
56

57
00:05:17,060 --> 00:05:21,770
Mobile landscape is doing great on its own.
57

58
00:05:22,250 --> 00:05:25,760
I don't think anything needs to be changed. Now for the mobile portrait.
58

59
00:05:27,620 --> 00:05:29,690
First, let's reverse the layout.
59

60
00:05:29,690 --> 00:05:34,550
Luckily we have the class specifically for this, so we just need to add that combo class to 
60

61
00:05:34,550 --> 00:05:37,270
the flexbox.
61

62
00:05:37,270 --> 00:05:43,600
Second, we need exactly the same spacing as the image above. The same style wasn't carried on this one,
62

63
00:05:43,600 --> 00:05:47,380
because this image wrapper has a combo class applied to it and left-right
63

64
00:05:47,380 --> 00:05:53,350
margins are overridden by that combo class. But not the bottom margin. So, that one was carried to this
64

65
00:05:53,350 --> 00:05:54,210
element as well.
65

66
00:06:11,530 --> 00:06:12,270
And there you go.
66

67
00:06:12,270 --> 00:06:18,160
The mobile portrait looks great. Check the responsiveness, check the preview mode for animations and all that,
67

68
00:06:18,160 --> 00:06:23,170
Make sure everything is looking good and working fine. And in the next video, we will move on to the testimonial
68

69
00:06:23,170 --> 00:06:23,660
section.