0
1
00:00:03,210 --> 00:00:05,850
The testimonial section is relatively simple. For the tablet
1

2
00:00:05,850 --> 00:00:10,140
it's good as is. Just shrink that space between the headline and the slider.
2

3
00:00:12,800 --> 00:00:15,010
Half of that should be good.
3

4
00:00:34,770 --> 00:00:36,520
Mobile landscape is pretty good as well.
4

5
00:00:54,920 --> 00:00:58,700
Now on portrait mode, we need to change the width of the testimonial cards.
5

6
00:00:58,700 --> 00:01:01,800
Obviously we'll be able to fit only one card at a time.
6

7
00:01:01,880 --> 00:01:04,670
The width is being set by the slide element.
7

8
00:01:04,700 --> 00:01:10,470
If we change that from pixel value to 100%, then it will be as wide as the parent container.
8

9
00:01:10,490 --> 00:01:12,590
So, basically stretching from edge to edge.
9

10
00:01:19,430 --> 00:01:23,030
But what would be nice, is to show user that there are more testimonials.
10

11
00:01:23,220 --> 00:01:26,210
And it's not just one lonely testimonial that is sitting here.
11

12
00:01:26,220 --> 00:01:31,620
So, if we change the width to 90% then that should bring a little part of the next card in
12

13
00:01:31,620 --> 00:01:32,770
the visible screen.
13

14
00:01:32,790 --> 00:01:38,190
That's great, but the content is a little too narrow. So let's make some more space for it by shrinking
14

15
00:01:38,190 --> 00:01:39,720
margins and paddings.
15

16
00:01:39,750 --> 00:01:46,920
First, we can half the margin on the right, so more of the card shows from the next. Which means we can increase
16

17
00:01:46,920 --> 00:01:51,050
the width of the slide more than 90% to maybe 95%.
17

18
00:01:54,450 --> 00:02:00,110
Now for the padding, 30 pixels on all sides look better.
18

19
00:02:04,400 --> 00:02:05,120
And that's all.
19

20
00:02:05,120 --> 00:02:06,410
Up next, the footer.
20

21
00:02:09,650 --> 00:02:12,210
The footer, if you remember, we didn't create from scratch.
21

22
00:02:12,240 --> 00:02:14,620
We copied it from our previous project.
22

23
00:02:14,640 --> 00:02:18,410
The best part about reusing your competence across different projects is this:
23

24
00:02:18,420 --> 00:02:23,640
they are already optimized. All those responsive changes we have made to the first project,
24

25
00:02:23,640 --> 00:02:25,810
they are going to be carried with the component,
25

26
00:02:25,890 --> 00:02:27,820
when you copy them to a different project.
26

27
00:02:27,990 --> 00:02:29,230
No need to do it again.
27

28
00:02:29,340 --> 00:02:34,710
Such a time saver. Although we do have to make a couple of adjustments because we did change the layout
28

29
00:02:34,710 --> 00:02:38,670
of the footer. Like this spacing issue, for example. Probably in previous project,
29

30
00:02:38,670 --> 00:02:44,040
we had a little different plan for this. But here if you check the desktop version, columns are distributed
30

31
00:02:44,070 --> 00:02:45,780
equally from edge to edge.
31

32
00:02:45,780 --> 00:02:49,890
This is a pretty good layout for the tablet as well, so let's reset the style, so it's inheriting from
32

33
00:02:49,890 --> 00:02:50,790
the desktop version.
33

34
00:02:55,600 --> 00:02:59,420
Now, on the mobile landscape, perhaps we could change the justification back to left.
34

35
00:02:59,420 --> 00:03:05,710
The columns are a little too scattered apart. We can go an extra step and try to align the Company column
35

36
00:03:05,740 --> 00:03:07,800
with the Subscribe column below.
36

37
00:03:07,810 --> 00:03:10,330
We just need to shrink the width of the logo column.
37

38
00:03:16,800 --> 00:03:18,450
And that and alignment makes it look nicer.
38

39
00:03:24,160 --> 00:03:25,720
Inside the mobile portrait,
39

40
00:03:25,720 --> 00:03:30,190
let's return that first column width to that original size, because there is space and that tag line
40

41
00:03:30,190 --> 00:03:31,440
looks better on two lines.
41

42
00:03:51,300 --> 00:03:54,980
The subscribe column is now buried on the bottom of the footer.
42

43
00:03:54,980 --> 00:03:56,720
That's not really the best arrangement.
43

44
00:03:56,720 --> 00:04:00,920
It would be better if we brought it to the top, because nobody is gonna bother scrolling all the way
44

45
00:04:00,920 --> 00:04:01,830
down for it.
45

46
00:04:01,910 --> 00:04:05,920
Now here's how awesome flexbox is. Flex child has their own set of settings.
46

47
00:04:05,930 --> 00:04:11,630
There are some sizing settings that a child can override. The general flex box sizing settings and also
47

48
00:04:11,630 --> 00:04:17,780
we can override alignment and order. So if we change the order of our last column, we can actually make
48

49
00:04:17,780 --> 00:04:18,350
it first.
49

50
00:04:19,880 --> 00:04:21,610
But we don't want it exactly first.
50

51
00:04:21,620 --> 00:04:25,220
We'd prefer it came after the logo column. But not to worry,
51

52
00:04:25,220 --> 00:04:26,480
we can do that too.
52

53
00:04:26,510 --> 00:04:31,170
We just need to give the logo column the same order style and it will pop back on top.
53

54
00:04:31,220 --> 00:04:32,110
And there you go.
54

55
00:04:32,210 --> 00:04:34,760
When you do this make sure you have a combo class applied.
55

56
00:04:34,760 --> 00:04:40,250
Otherwise, this change will apply to every single footer column and that won't give expected results.
56

57
00:04:40,250 --> 00:04:45,750
I haven't applied anything, because we already had combo classes on both of these first and last columns.
57

58
00:04:45,840 --> 00:04:47,510
Alright, lets check the responsiveness.
58

59
00:04:52,340 --> 00:04:52,610
Okay.
59

60
00:04:52,620 --> 00:04:54,810
We have this overflow issue with the email field.
60

61
00:04:59,170 --> 00:05:03,800
The fixed width of 267 pixels is too much on that tiny screen.
61

62
00:05:03,860 --> 00:05:10,340
So instead of fixed, we can change to maximum width of 267. And change fixed value to 100%, so
62

63
00:05:10,340 --> 00:05:26,630
it stretches when it has space.
63

64
00:05:36,040 --> 00:05:36,520
Excellent.
64

65
00:05:36,520 --> 00:05:37,650
All looking good now.
65

66
00:05:37,650 --> 00:05:38,110
That's it.
66

67
00:05:38,110 --> 00:05:43,270
The home page is done. And it's going to look great, no matter the device or the screen size. In the next
67

68
00:05:43,270 --> 00:05:48,570
the section, we're going to build a blog. Which is done by a super-powerful Webflow CMS and we're gonna
68

69
00:05:48,610 --> 00:05:50,080
learn all about it.
69

70
00:05:50,140 --> 00:05:51,070
It's gonna be fun.
70

71
00:05:51,070 --> 00:05:51,620
Stick around.