Now let's make our blog page responsive. 1
The desktop is doing well. 2
The cards sharing to a reasonable size, so we can still keep 3 columns. 3
On the tablets, it's a different story. 4
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
that's going to affect desktop version too. 6
It's global, not device specific. 7
But it's quite simple. 8
These items are inside a flexbox with wrapping enabled. This means cards will jump to the next line 9
when there is no space. 10
If we give the collection item a 50% width, that will instantly organize everything in 2 columns. 11
Easy as that. 12
They will also stretch and shrink to occupy according space 13
Now for the landscape, it's a little tricky. On wider sizes it's perfect. 14
But when you shrink to the smaller size. Then 2 columns is too much. 15
Some of the content even gets squeezed, like avatars for example. 16
One option is to create a single column layout. 17
So, we would need to set the width to 100%. 18
Single column isn't bad in this case. 19
But do you know what would be the perfect layout? If we could have 2-column layout and in some specific 20
width for it to turn into single column. 21
For example, if we set minimum width of collection item to 300 pixels. This way cards will shrink 22
until 300 pixel. And then they will wrap to the second line creating 1-column layout. 23
But this isn't ideal. On the big screen, we get this gap. Ideally, we want it to switch to 100% width 24
the moment they go single column. 25
Luckily, there is an advanced trick for this. 26
We can set such specific rules under flex child settings, underneath the more options. Remove the minimum 27
width settings before you start editing this part. 28
There are 3 fields, with Grow, Shrink and Bases value. The combination of these 3 values 29
renders different results. 30
It's quite powerful. 31
I won't dive deep into the logic of how they all work. 32
I don't fully understand myself, but I'll explain the one variation that we need right now. Inside the 33
basis, 34
we can set a value like 300 pixels. Then in the shrink field, we can specify to not shrink beyond this 35
value. 36
The value for this needs to be zero. 37
If it's 1 and above, then it means it can shrink beyond that value. 38
So with shrink set to zero, it doesn't shrink beyond that. 39
And the cards wrap to the next line. 40
It's like setting a minimum. Now, because Grow is set to 0. It neither grows beyond 300 pixel, nor shrinks. 41
0-0 basically means don't grow, don't shrink. Just keep it at 300 pixels. 42
But if we set grow to 1, then we will allow it to grow beyond 300 pixels to occupy any available space. 43
And this gives us an absolutely perfect layout. Where it's 2 full column, and when it gets too small, 44
then it turns into a single full width column. 45
If you didn't wrap your head around this fully, 46
don't worry, it's a tricky concept. 47
Just know, that such granular control is an option, when you need it. 48
Then randomly you can play with different values until you get the desired result. 49
That's what I do most of the time anyways. 50
Finally, let's see the portrait mode. Because of the flex child settings that we have set in the landscape 51
mode, portrait is automatically in a single column mode. Although, with one issue. Since we don't allow 52
it to shrink below 300 pixels. It goes beyond page borders. 53
Now, because we are using flex child settings, we are not able to edit width settings here. Because 54
flex child settings ignores these values. So, we turn the flex child back to its default value, which is the 55
Shrink if needed. And then we will be able to change the width to 100%. 56
There is one last thing we can fix. You see, on these super narrow devices, 57
the avatar gets all squashed, squished... I don't know. 58
Yes, these are very old Android phones, but we can fix it easily. 59
So why not? 60
Avatar is sitting inside a flexbox. 61
That's why it's shrinking even though it has fixed width. By default, 62
all flex child are shrink if needed. 63
If we change that to don't shrink or grow. 64
Then avatar will stay proper size and other text elements will shrink if needed. 65
And that's it. Really, 66
that's it. Our website is fully done, 67
it's responsive, it looks beautiful, it's fast and powerful. 68
People pay good bucks for this. In the next section, we'll give finishing touches and we'll publish the 69
website. 70
First, we're gonna publish it on Webflow subdomain. But then we're going to publish it on a custom domain. 71
Because that's an important part. You need to learn that as well. 72
So, you can take the website that you're building for the client and then actually put it on their domain. 73
But more about that later. 74
Stick around.