All right. So let's start with a hero section. 1
We'll go one by one for each device and optimize the style. 2
First the tablet view. 3
What issues can we identify here? 4
We have the image that is shrinking too much because of not enough space. 5
The content on the left has a minimum width, 6
if you remember, so that means image is taking the hit. 7
Then we have a Navbar that needs fixing. 8
We'll have to see if we can actually fit our regular links in here. 9
If not, we'll keep the hamburger menu and style it. The hero section is way too stretched. For two reasons. 10
First, because of 100 VH we have applied to the section. 11
And second, because of the similar 20 VH padding. 12
Let's see if we can fit the navigation links. 13
So how do we disable that hamburger icon and show the navigation links? 14
We can do that from Navbar 15
settings. Click anywhere on the navbar and go to settings. As you can see it says Menu icon: for tablet 16
and below. 17
If we move the slider towards the smartphones that will disable this from the tablet view. 18
As a general rule, for user experience showing links is much better approach than not showing them. For 19
obvious reasons it's easier to find and navigate. 20
Real estate on tablets and mobile devices is very important. 21
The spacing on these devices have to be much smaller than what we would do on a desktop. 22
So let's remove that large padding that is applied to the section. Instead of VH, 23
this time we're going to use regular pixels. Because it will give us more predictable looks. Say, 90 24
pixels. 25
All right. 26
The overall spacing for the hero is pretty good. 27
And we don't have bloated spacing. 28
That's good. 29
So what to do with a hero image? 30
It's still quite small in comparison. The left content is too large and it's pushing the image. On desktop, 31
we had enough real estate to be able to use such large headline, but here we don't, 32
so we can start shrinking the sizes in the left block. 33
So we did shrink the content, but the image is not growing. 34
Why is that? 35
Because we have minimum width settings applied to the left block. 36
And even though content is shrinking, the box itself isn't. 37
So let's change this minimum width. 38
All right. 39
That looks pretty good. 40
Let's test the fluidity of this layout, by resizing our canvas. 41
Great, it flows really well on the entire page. 42
So the tablet layout for hero section is done. 43
All the changes that we made has not been reflected back onto our desktop. 44
It's still the way we left it. 45
Now let's move to mobile views.