0
1
00:00:03,050 --> 00:00:05,440
And we're back for some responsive design.
1

2
00:00:05,480 --> 00:00:08,270
There is very little that needs to be done, so we can take care of it
2

3
00:00:08,270 --> 00:00:09,170
in one video.
3

4
00:00:14,340 --> 00:00:17,190
The navbar needs some editing for the landscape mode.
4

5
00:00:17,210 --> 00:00:21,460
First, let's fix the margins. Our default section has 30 pixels side padding.
5

6
00:00:21,560 --> 00:00:24,490
But navbar in this case has a 60 pixel one.
6

7
00:00:24,560 --> 00:00:27,440
That's because this is a little different navbar from our home page.
7

8
00:00:27,590 --> 00:00:30,710
So just decrease the padding to 30 pixel and you're good.
8

9
00:00:30,980 --> 00:00:32,680
The menu icon needs a different color.
9

10
00:00:32,680 --> 00:00:37,200
It's white so we can't see it right now. Before we change the color,
10

11
00:00:37,200 --> 00:00:43,020
we have to make sure to apply a combo class to the menu button. Or it's going to affect the one on the
11

12
00:00:43,090 --> 00:00:43,560
homepage.
12

13
00:00:49,570 --> 00:00:50,380
That's looking good.
13

14
00:00:50,380 --> 00:00:51,640
Let's check the preview mode.
14

15
00:00:54,940 --> 00:01:00,640
So here we have a little conflict between the background, and the link colors, and the menu button color.
15

16
00:01:00,640 --> 00:01:01,360
The links are here.
16

17
00:01:01,360 --> 00:01:05,550
They haven't disappeared, they're just dark colored for the same reason as the menu button.
17

18
00:01:05,590 --> 00:01:06,920
We just changed them
18

19
00:01:06,940 --> 00:01:13,950
previously, when we were designing our navigation bar. And scenes they have to maintain to be dark.
19

20
00:01:13,960 --> 00:01:21,820
Then in this case, we can only change the background of this drop down menu. So changing it to a very
20

21
00:01:21,820 --> 00:01:23,610
light gray is going to be just fine.
21

22
00:01:54,110 --> 00:01:59,620
All right navbar is looking good on all screens.
22

23
00:01:59,720 --> 00:02:06,540
Now, let's check the header with the main image. The tablet is quite fine. The landscape mode looks
23

24
00:02:06,540 --> 00:02:07,490
good at first sight.
24

25
00:02:07,500 --> 00:02:09,440
But think again, this is going to be narrow,
25

26
00:02:09,470 --> 00:02:14,200
so the image that is so tall is going to occupy too much visible screen.
26

27
00:02:14,210 --> 00:02:19,620
This image is going to work best when it's landscape mode as well. Especially because that's what content
27

28
00:02:19,620 --> 00:02:25,080
creators will upload. Something like 250 pixel height should bring it to proper dimensions.
28

29
00:02:27,700 --> 00:02:35,260
Similarly, for the portrait mode, we will need to shrink it a little more. 150 pixels look good.
29

30
00:02:35,260 --> 00:02:39,780
I'd also shrink spacing around the image, both on landscape and portrait.
30

31
00:02:59,010 --> 00:03:02,070
There's something fun we can do with the main image. On the desktop,
31

32
00:03:02,070 --> 00:03:07,410
we have this non-traditional layout, where main image is sticking out of the main container. But on a
32

33
00:03:07,410 --> 00:03:08,270
smaller screens,
33

34
00:03:08,280 --> 00:03:13,260
that's not happening, because the section padding is pushing everything in one place. But there is a way
34

35
00:03:13,260 --> 00:03:13,830
around it.
35

36
00:03:14,250 --> 00:03:19,950
If we give the main image some amount of negative margin, it will cancel out the padding from the section.
36

37
00:03:20,430 --> 00:03:27,420
So the tablet section has a 60 pixel padding. So we can give the image negative 60 pixels margin, and
37

38
00:03:27,420 --> 00:03:38,200
that's going to cancel the padding and go edge to edge. Making it look more interesting.
38

39
00:03:38,230 --> 00:03:43,890
This will cascade down to the mobile too, but we need to adjust. On mobile section, padding is 30 pixels.
39

40
00:03:44,080 --> 00:03:49,270
So we need to adjust it to negative 30 pixels as well. And that will be exactly edge to edge.
40

41
00:03:55,970 --> 00:03:57,120
On portrait mode,
41

42
00:03:57,120 --> 00:04:00,030
author and date segment needs some adjustment.
42

43
00:04:00,030 --> 00:04:01,830
The space in between is too much.
43

44
00:04:01,830 --> 00:04:03,670
That's why it's being squeezed like that.
44

45
00:04:03,690 --> 00:04:10,050
So let's just shrink that. We're controlling spacing on the divider, so that's what we need to edit. 15 pixel
45

46
00:04:10,050 --> 00:04:32,810
less is going to be good. On the left 15 but on the right 0, because there is margin from the date.
46

47
00:04:33,120 --> 00:04:36,180
Now let's check the rest of the page.
47

48
00:04:38,250 --> 00:04:45,470
Rich Text doesn't need any adjustments, it's responsive already and looking good on all screens. There is
48

49
00:04:45,520 --> 00:04:50,520
just this squashing issue for the avatar on the bottom. Both on landscape and portrait.
49

50
00:04:50,530 --> 00:04:52,540
That's because it's a flexchild.
50

51
00:04:52,540 --> 00:04:55,420
Flex children by default can shrink if there is not enough space.
51

52
00:04:55,420 --> 00:04:58,360
You can see this setting under flex child properties.
52

53
00:04:58,360 --> 00:05:03,790
If you change this to Don't shrink or grow, then it will honour the width and height size that we have
53

54
00:05:03,790 --> 00:05:07,320
already put for the element. On the portrait,
54

55
00:05:07,320 --> 00:05:12,030
we can even trim a little bit of space, on the right, and bring the content closer to it.
55

56
00:05:16,410 --> 00:05:17,390
And that's all. Footer needs
56

57
00:05:17,400 --> 00:05:17,940
nothing.
57

58
00:05:17,940 --> 00:05:21,150
It's the same footer from the home page and it's already optimized.
58

59
00:05:23,380 --> 00:05:28,620
This page is now fully ready and looking stunning. In the upcoming videos, we're going to create a block
59

60
00:05:28,620 --> 00:05:29,470
home page.
60

61
00:05:29,470 --> 00:05:29,980
Stick around.