As I mentioned, in a previous video, the style changes cascade down to smaller screens. So all the changes 1
we made to the tablet is reflected on the mobile views as well. 2
Usually, it is a good start. And sometimes might even provide good results for mobiles. But often it's 3
not enough and we have to add extra tweaking on mobiles too. 4
I like to use same layout for mobile landscape and mobile portrait. 5
I use mobile portrait as my guide when I plan in my head. And try to use solutions for a landscape view, 6
that are going to work on portrait view as well. 7
It's just a good way to save time and keep things more efficient. 8
So based on the portrait view on mobile, I know, that nearly everything is going to be in vertical layout. 9
Not much space for a columns and side by side layouts. 10
There is no way we are fitting hero image and content next to each other. 11
We'll need to find the vertical alignment solution. 12
Luckily we have flexbox to help us with this. 13
The default direction of flexbox is horizontal. 14
We can change that direction anytime to the vertical. And alignment options update as well, when we change 15
the direction. And this direction change is not going to apply to the Desktop version. 16
There it's still set to the horizontal. 17
That's how awesome the flexbox is. 18
We can change the layout without altering the HTML structure. And setting these styles on a specific devices. 19
But before we make these changes, let's give our flexbox a combo class. Because we are using this default 20
flexbox elsewhere, for example on footer. And we don't want to make all these changes to all of the 21
flexbox instances. 22
Real landscape view isn't actually as tall. 23
Think of it, when you hold your phone in the landscape mode, you're not going to get the visible screen 24
this tall. It's going to be more like this. 25
It means, vertical real estate is very important for us, so let's try to shrink spaces and try to fit 26
as much as possible. 27
For example, this padding for the section. We already shrank this on tablet view, but we should shrink 28
it a little more. 29
Same here for the paragraph margin. 40 pixels 30
looks decent. 31
The photo is a little too small *(too tall) and most of it won't be visible on the single screen and user will have 32
to scroll through it. 33
So let's set the maximum width on that image. 34
I'm setting maximum width and not height. Because if you do a height value, then this will happen. 35
Changing height doesn't preserve the aspect ratio, but width value does. So on images best to use width to 36
resize them. 37
Alright. 38
Something interesting has happened here. 39
The image doesn't shrink anymore on a smaller screen and it goes off the page. 40
This is called overflow. When elements go outside of their parent box. You will come across with overflow 41
objects often, especially on smaller screens. 42
This overflowing can happen for many reasons and it affects entire page. 43
For some reason an image refuses to shrink, so it creates an extra space on the entire page. 44
So, how come image doesn't shrink anymore? 45
Because when we gave an image maximum width of 500 pixels, we gave it the permission to grow all the 46
way to 500 pixels. So it does. Ignoring the dimensions of its parent element. 47
This sort of behavior is common with images. 48
Some other elements, for example, a paragraph is not going to do this, but images they do. Because they 49
have an exact width as part of the file. Or it has a width specified in the settings. 50
So by default, image will always try to grow to its original file size. And when we set max width to 500, 51
it stops on 500. But doesn't shrink beyond that, as long as it's allowed. To avoid this sort of behavior 52
Webflow has an added default value for every image that you drop in. A max width of 100%. 53
This means that the image will take up maximum of 100% of its parent element. 54
For this reason it's best to leave this value untouched. 55
This thing always gave me a lot of confusion and clueless stares on my screen. 56
So now instead of styling the image itself, I prefer styling the parent of the image. 57
This way we can avoid a lot of strange behavior down the line. 58
All right, so let's give a maximum width of 500 pixels to the parent element, instead. 59
Now this behaves exactly as we want it to. 60
It doesn't grow beyond 500 and it shrinks when it needs to. Alright, we can conclude the landscape view 61
here. 62
We still have this horizontal overflow, but this is from other part of the page and we will take care 63
of it, when we get to it. 64
We do need to style the hamburger menu, but we'll do that in the end, once we're done with all the views 65
of the hero section. 66
Up next, we'll do the mobile portrait view. 67
Stick around.