0
1
00:00:03,110 --> 00:00:05,150
Now let's make our blog page responsive.
1

2
00:00:06,370 --> 00:00:07,660
The desktop is doing well.
2

3
00:00:07,660 --> 00:00:11,310
The cards sharing to a reasonable size, so we can still keep 3 columns.
3

4
00:00:14,030 --> 00:00:15,830
On the tablets, it's a different story.
4

5
00:00:15,830 --> 00:00:22,650
It's too much for 3, so we've got to go with 2 columns. We can't change the layout from these settings,
5

6
00:00:22,700 --> 00:00:25,230
that's going to affect desktop version too.
6

7
00:00:25,280 --> 00:00:27,220
It's global, not device specific.
7

8
00:00:31,360 --> 00:00:32,480
But it's quite simple.
8

9
00:00:32,500 --> 00:00:38,410
These items are inside a flexbox with wrapping enabled. This means cards will jump to the next line
9

10
00:00:38,410 --> 00:00:39,970
when there is no space.
10

11
00:00:39,970 --> 00:00:45,990
If we give the collection item a 50% width, that will instantly organize everything in 2 columns.
11

12
00:00:47,940 --> 00:00:48,800
Easy as that.
12

13
00:00:48,860 --> 00:00:51,930
They will also stretch and shrink to occupy according space
13

14
00:00:56,740 --> 00:01:00,310
Now for the landscape, it's a little tricky. On wider sizes it's perfect.
14

15
00:01:00,370 --> 00:01:03,890
But when you shrink to the smaller size. Then 2 columns is too much.
15

16
00:01:03,910 --> 00:01:07,310
Some of the content even gets squeezed, like avatars for example.
16

17
00:01:07,330 --> 00:01:09,730
One option is to create a single column layout.
17

18
00:01:09,760 --> 00:01:12,580
So, we would need to set the width to 100%.
18

19
00:01:21,110 --> 00:01:22,960
Single column isn't bad in this case.
19

20
00:01:22,970 --> 00:01:28,580
But do you know what would be the perfect layout? If we could have 2-column layout and in some specific
20

21
00:01:28,580 --> 00:01:31,130
width for it to turn into single column.
21

22
00:01:31,220 --> 00:01:39,080
For example, if we set minimum width of collection item to 300 pixels. This way cards will shrink
22

23
00:01:39,110 --> 00:01:44,780
until 300 pixel. And then they will wrap to the second line creating 1-column layout.
23

24
00:01:44,780 --> 00:01:51,910
But this isn't ideal. On the big screen, we get this gap. Ideally, we want it to switch to 100% width
24

25
00:01:51,910 --> 00:01:53,730
the moment they go single column.
25

26
00:01:53,920 --> 00:01:56,470
Luckily, there is an advanced trick for this.
26

27
00:01:56,500 --> 00:02:03,460
We can set such specific rules under flex child settings, underneath the more options. Remove the minimum
27

28
00:02:03,460 --> 00:02:06,180
width settings before you start editing this part.
28

29
00:02:06,190 --> 00:02:11,290
There are 3 fields, with Grow, Shrink and Bases value. The combination of these 3 values
29

30
00:02:11,290 --> 00:02:12,810
renders different results.
30

31
00:02:12,820 --> 00:02:14,510
It's quite powerful.
31

32
00:02:14,560 --> 00:02:17,290
I won't dive deep into the logic of how they all work.
32

33
00:02:17,380 --> 00:02:23,050
I don't fully understand myself, but I'll explain the one variation that we need right now. Inside the
33

34
00:02:23,050 --> 00:02:23,500
basis,
34

35
00:02:23,500 --> 00:02:29,170
we can set a value like 300 pixels. Then in the shrink field, we can specify to not shrink beyond this
35

36
00:02:29,170 --> 00:02:30,050
value.
36

37
00:02:30,130 --> 00:02:32,050
The value for this needs to be zero.
37

38
00:02:32,110 --> 00:02:36,400
If it's 1 and above, then it means it can shrink beyond that value.
38

39
00:02:36,400 --> 00:02:39,610
So with shrink set to zero, it doesn't shrink beyond that.
39

40
00:02:39,610 --> 00:02:41,820
And the cards wrap to the next line.
40

41
00:02:41,830 --> 00:02:49,510
It's like setting a minimum. Now, because Grow is set to 0. It neither grows beyond 300 pixel, nor shrinks.
41

42
00:02:49,510 --> 00:02:53,890
0-0 basically means don't grow, don't shrink. Just keep it at 300 pixels.
42

43
00:02:53,920 --> 00:03:01,120
But if we set grow to 1, then we will allow it to grow beyond 300 pixels to occupy any available space.
43

44
00:03:02,670 --> 00:03:08,070
And this gives us an absolutely perfect layout. Where it's 2 full column, and when it gets too small,
44

45
00:03:08,070 --> 00:03:10,830
then it turns into a single full width column.
45

46
00:03:10,830 --> 00:03:12,630
If you didn't wrap your head around this fully,
46

47
00:03:12,630 --> 00:03:14,520
don't worry, it's a tricky concept.
47

48
00:03:14,520 --> 00:03:18,080
Just know, that such granular control is an option, when you need it.
48

49
00:03:18,210 --> 00:03:22,230
Then randomly you can play with different values until you get the desired result.
49

50
00:03:22,380 --> 00:03:24,060
That's what I do most of the time anyways.
50

51
00:03:26,720 --> 00:03:32,140
Finally, let's see the portrait mode. Because of the flex child settings that we have set in the landscape
51

52
00:03:32,140 --> 00:03:37,930
mode, portrait is automatically in a single column mode. Although, with one issue. Since we don't allow
52

53
00:03:37,930 --> 00:03:41,690
it to shrink below 300 pixels. It goes beyond page borders.
53

54
00:03:41,740 --> 00:03:47,170
Now, because we are using flex child settings, we are not able to edit width settings here. Because
54

55
00:03:47,170 --> 00:03:53,770
flex child settings ignores these values. So, we turn the flex child back to its default value, which is the
55

56
00:03:53,770 --> 00:04:02,620
Shrink if needed. And then we will be able to change the width to 100%.
56

57
00:04:02,640 --> 00:04:06,450
There is one last thing we can fix. You see, on these super narrow devices,
57

58
00:04:06,460 --> 00:04:09,800
the avatar gets all squashed, squished... I don't know.
58

59
00:04:10,010 --> 00:04:13,110
Yes, these are very old Android phones, but we can fix it easily.
59

60
00:04:13,110 --> 00:04:14,310
So why not?
60

61
00:04:14,420 --> 00:04:16,360
Avatar is sitting inside a flexbox.
61

62
00:04:16,360 --> 00:04:19,990
That's why it's shrinking even though it has fixed width. By default,
62

63
00:04:20,020 --> 00:04:22,200
all flex child are shrink if needed.
63

64
00:04:22,330 --> 00:04:24,800
If we change that to don't shrink or grow.
64

65
00:04:24,910 --> 00:04:29,040
Then avatar will stay proper size and other text elements will shrink if needed.
65

66
00:04:29,050 --> 00:04:30,800
And that's it. Really,
66

67
00:04:30,860 --> 00:04:33,110
that's it. Our website is fully done,
67

68
00:04:33,140 --> 00:04:37,830
it's responsive, it looks beautiful, it's fast and powerful.
68

69
00:04:37,960 --> 00:04:42,490
People pay good bucks for this. In the next section, we'll give finishing touches and we'll publish the
69

70
00:04:42,490 --> 00:04:43,200
website.
70

71
00:04:43,360 --> 00:04:48,730
First, we're gonna publish it on Webflow subdomain. But then we're going to publish it on a custom domain.
71

72
00:04:48,910 --> 00:04:51,670
Because that's an important part. You need to learn that as well.
72

73
00:04:51,730 --> 00:04:57,540
So, you can take the website that you're building for the client and then actually put it on their domain.
73

74
00:04:57,610 --> 00:04:58,870
But more about that later.
74

75
00:04:58,870 --> 00:04:59,380
Stick around.