And we're back for some responsive design. 1
There is very little that needs to be done, so we can take care of it 2
in one video. 3
The navbar needs some editing for the landscape mode. 4
First, let's fix the margins. Our default section has 30 pixels side padding. 5
But navbar in this case has a 60 pixel one. 6
That's because this is a little different navbar from our home page. 7
So just decrease the padding to 30 pixel and you're good. 8
The menu icon needs a different color. 9
It's white so we can't see it right now. Before we change the color, 10
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
homepage. 12
That's looking good. 13
Let's check the preview mode. 14
So here we have a little conflict between the background, and the link colors, and the menu button color. 15
The links are here. 16
They haven't disappeared, they're just dark colored for the same reason as the menu button. 17
We just changed them 18
previously, when we were designing our navigation bar. And scenes they have to maintain to be dark. 19
Then in this case, we can only change the background of this drop down menu. So changing it to a very 20
light gray is going to be just fine. 21
All right navbar is looking good on all screens. 22
Now, let's check the header with the main image. The tablet is quite fine. The landscape mode looks 23
good at first sight. 24
But think again, this is going to be narrow, 25
so the image that is so tall is going to occupy too much visible screen. 26
This image is going to work best when it's landscape mode as well. Especially because that's what content 27
creators will upload. Something like 250 pixel height should bring it to proper dimensions. 28
Similarly, for the portrait mode, we will need to shrink it a little more. 150 pixels look good. 29
I'd also shrink spacing around the image, both on landscape and portrait. 30
There's something fun we can do with the main image. On the desktop, 31
we have this non-traditional layout, where main image is sticking out of the main container. But on a 32
smaller screens, 33
that's not happening, because the section padding is pushing everything in one place. But there is a way 34
around it. 35
If we give the main image some amount of negative margin, it will cancel out the padding from the section. 36
So the tablet section has a 60 pixel padding. So we can give the image negative 60 pixels margin, and 37
that's going to cancel the padding and go edge to edge. Making it look more interesting. 38
This will cascade down to the mobile too, but we need to adjust. On mobile section, padding is 30 pixels. 39
So we need to adjust it to negative 30 pixels as well. And that will be exactly edge to edge. 40
On portrait mode, 41
author and date segment needs some adjustment. 42
The space in between is too much. 43
That's why it's being squeezed like that. 44
So let's just shrink that. We're controlling spacing on the divider, so that's what we need to edit. 15 pixel 45
less is going to be good. On the left 15 but on the right 0, because there is margin from the date. 46
Now let's check the rest of the page. 47
Rich Text doesn't need any adjustments, it's responsive already and looking good on all screens. There is 48
just this squashing issue for the avatar on the bottom. Both on landscape and portrait. 49
That's because it's a flexchild. 50
Flex children by default can shrink if there is not enough space. 51
You can see this setting under flex child properties. 52
If you change this to Don't shrink or grow, then it will honour the width and height size that we have 53
already put for the element. On the portrait, 54
we can even trim a little bit of space, on the right, and bring the content closer to it. 55
And that's all. Footer needs 56
nothing. 57
It's the same footer from the home page and it's already optimized. 58
This page is now fully ready and looking stunning. In the upcoming videos, we're going to create a block 59
home page. 60
Stick around.