And moving ahead with the next section. For the tablet, it's quite easy, 1
we just need to move that image more towards the left. When you click on it, you'll see that it has a 2
negative margin. 3
That's what makes it move out of the page so much. 4
Let's decrease the negative margin. 5
I think, 6
this looks quite good. 7
Minus 350 pixels. 8
Check the fluidity and that's it. 9
Now for the mobile landscape. 10
Let's start by section padding. 11
We've made horizontal padding smaller on the hero section. 12
It's 30 pixels. 13
We've never matched that with the rest of the sections. 14
We can't make the change on this section directly, because it has a combo class applied to it. 15
If we shrink the space it's only going to apply to this combo class and none of the other sections. 16
So, what we can do is either select another section that doesn't have a combo class, like the next one 17
for example. Or we can get rid of the combo class for a moment, style section and then put the combo class 18
back in. 19
But that's more complicated. 20
So, let's just style the section below. 21
And of course, that has applied the padding on the above section too. 22
Similarly, we can change the value that is more appropriate and decrease it to something like minus 260 pixels. 23
Again, check the fluidity. 24
One more thing I'd like to fix here is the vertical padding on the section. On landscape mode vertical 25
space is very limited. 26
If you'd imagine that you're seeing this on actual mobile landscape, you'll understand that you will have 27
some gaps where you're not really seeing much content. 28
One thing to note about mobile landscape view, it's not just mobile landscape, but also some tablets and 29
fablets, or whatever they're called. Because you'll see in the viewer it shows different 30
sizes for different devices. 31
So, it's not just mobile landscape in reality, but we call it mobile landscape. 32
Just to make things easier. 33
So we have 80 pixel vertical padding on our default sections. 34
I'd shrink this to like 60 pixels. 35
Just like we did previously, select a section that doesn't have a combo class and style that one. 36
Okay. 37
Moving on to the mobile portrait. 38
The image on this section isn't even visible. 39
So, what we're going to do is change the direction of the flexbox to vertical. 40
There is another direction we can change, we can reverse the order inside flexbox. And having image first, 41
makes more sense. Which is quite simple to do, just by enabling this reverse button. 42
But let's give this a combo class first before we do this. Vertical direction is something that is fine 43
to apply to the base class. 44
It's going to be the main layout for most flexboxes on mobile. But the order is something more specific. 45
So for that, it's best to have a combo class and not affect other flexboxes on our page. Because we also 46
have a flexbox in the footer and that's going to reverse things there too. 47
And now we can style the image. One issue is that image is too small. 48
So, we should increase the size. Increasing the size of the image has some dos and don'ts. 49
We can't change the width from the image settings. 50
These are global image settings, so if we change the size here, it's going to affect on every single screen 51
size. 52
See now image is gone from the desktop. So, the ideal place is to style it from the styles panel. And in 53
here there is another don't. Don't style the height. 54
When you style the height, it doesn't preserve aspect ratio and you get a spaghetti image. 55
The width values are the best option. 56
But here too, some things will behave oddly. Depending on the situation either fixed width or minimum 57
width works the best. 58
For example, regular width value doesn't change the size. 59
But the minimum width does a pretty good job. 60
Not that this is a bug or some sort of a glitch, there is usually an answer to such mysterious behaviors. 61
In this case, width doesn't do much, because there is a maximum width of 100%. Which is telling you 62
to be only as wide as the parent container. 63
It's basically overriding the width, but minimum width ignores that. Because it comes before the maximum 64
width. 65
Don't worry if you're not catching all of this. 66
I don't usually worry too much about the reasoning, I just play with values and see which one works. 67
All right, I would say 380 pixel looks good. 68
Now we need to fix the negative margin. 69
Maybe align the edge of the image with the content. 70
Something like minus 90 pixels. 71
And let's add some margin on the bottom. 72
Perfect. 73
Let's check the fluidity and we're good to go. 74
I don't worry too much about the screen sizes less than 320 pixel wide. 75
That's just such a rare appearance, especially for our target audience, who are modern teams. 76
I don't think any of them own Nokia in 95. 77
Besides that, fluidity looks great. 78
We'll continue with the rest in the next video. 79
Stick around.