And we're back. In this video, 1
we're going to adopt hero section to the different devices. 2
There isn't a lot that needs to be done, so it should be quick. 3
Let's shrink the height of the heroes section on the tablet. 4
It's too tall in this case. Something like 680 pixels should be good. 5
And we need to adjust the margin of the content, so it's centered again. 6
130 pixel looks good. 7
Moving onto a mobile landscape. 8
At first, it looks like there is nothing that needs fixing here. But we can't forget that we're not seeing 9
the true mobile landscape here. 10
This is too tall. To visualize this properly, 11
the best is to check it on an actual mobile. 12
But we can shrink the height of the browser to give us a rough idea of what we are working with. 13
This is something how it will look like. Nothing's visible here. 14
Vertical spacing is crucial on mobile landscape. 15
So we need to make our content snug and tighter. 16
First, let's cut down on section padding. 17
And remove the fixed height of the hero section. 18
We want it to be automatic in this case. 19
So to be only as tall as the content. 20
Similarly, let's cut down on horizontal padding. On smaller devices spaces is scarce. 21
I'd say 30 pixel padding on the sides instead of 60. 22
Next, we should shrink the font size a little. Our default H1 size is 55. 23
That can be a little too big for mobiles I'd go with 35 or 40. 24
Remember that heading style is coming from the H1 tag. To edit H1 tag on all mobile landscape, first, remove 25
whatever class is applied. And then from the dropdown, select all H1 headings. You should get that same 26
landscape icon on the left. 27
That's important. 28
This way we know that we are affecting all H1 for mobile landscape and down. And not tablet or desktop. 29
Once done, we can put that white class back. 30
One last thing for the landscape view. The content and background image are interacting now much more. 31
In the above versions content is on a blurry plain area, but here it's covering the model's face. 32
This makes text difficult to read. 33
First, let's move the word to the next line. 34
But that's not enough. 35
So we're going to add a dark overlay on the background image. 36
30% seems enough. 37
And that's done for landscape view. 38
So portray it needs a couple more things. 39
First, let's change the direction of the form to vertical, so that field is on top of the button. 40
This is quite easy because we have set this form as a flexbox. 41
So all we need to do is just switch the direction. 42
Make sure you're selecting the correct element. 43
There is form and form block, we haven't touched the form block it's unstyled. 44
Second, we need to fix the hero background. 45
This is where that custom positioning comes in handy. Because none of the preset alignment work for us. 46
I think 55% does a better job. 47
okay. 48
Let's check the fluidity. Oops, the field isn't stretching all the way because it has a max width. 49
So, let's remove it in this case and set it to none. That will make it as wide as the parent. 50
Keep in mind that any style changes that we make on these versions, only effect downwards and not 51
upwards in the hierarchy. 52
So, this field is only going to be reflected on the mobile portrait and not on landscape, tablet or desktop. 53
All done for the hero section. 54
Let's give it a go in the preview mode, making sure everything is looking nice and working properly. 55
Excellent. 56
We'll continue with following sections in the upcoming videos.