All right, so let's take a look at making
the homepage or responsive.
And for the most parts,
it's actually not that bad.
This is for the tablet view.
Obviously we can make the headline a little bit smaller.
Make the banana also a little bit shorter in height.
Right here.
Of course, we can add some padding to the ball off to
travel section as well as
teachable to best proceed section as well.
But I think that's all we need to do because
the rest is actually quite good.
The unique channel design section looks fine.
The gallery is fine.
Visits, our blog section is fine.
It doesn't packages reviews, all fine.
However, for the mobile view,
which is what we have arrived here, obviously,
we're going to have to make the text much,
much, much smaller as you can see.
Also add padding in here as well for the travel section.
And we need to do something about the fact
that we do have
the two images for
the second section lining
up next to each other ideally should be,
I will love to travel.
Then this image and then our children,
the best places, and then the image of this mountain.
So we're gonna have to do something about it as well.
Other than that, the rest
of the page looks quite good to consider.
The gallery is now one single row, which is fine.
The blog section is also one single row as well.
I want a 22 rows, I'm sorry.
Then it doesn't packages reviews all now and
the own separate column and then also produce as
you can see, that at.
All. Right, so let's go ahead and begin
to make the changes.
So let's edit with Elementor.
We're going to handle the banner first because that's the
that's the main That's the main issue.
Alright. Responsive tablets.
What do we have here?
We're gonna go ahead now and edit the text.
And the text was about 120 pixels.
As you can see.
We're gonna have two big break this down,
just a little bit much smaller.
So let's say 88 pixels wide.
But don't forget that we set a height for the section.
Let's go over to this section right now.
We have the minimum height here.
We're going to reduce this as much as we can.
Don't worry about the text overlapping
the header for now.
But let's try to give you a reasonable
height for the table.
And I think 519, my baby,
too small, let's say seven hundred.
Seven hundred seems fine enough.
Then from here, don't forget that we
also give it a negative margins as well.
Now that we've reduced the size from one hundred,
ten hundred to 700 women as well also go
to Advanced invite here.
Don't be fooled by the fact that you don't see
anything inside the margin boxes.
It's actually inheriting the margins
from the desktop view.
So here, let's go ahead now and try to reduce this.
Oh sorry, I forgot to unlink.
Let's make this 10.
All right. I'm gonna keep on going up again.
This should be about, let me just give it
150 minus, okay, I can't do that.
Let me just try this.
Minus 150.
Okay? I think that's a bit too much.
Let's go down.
Okay, So it should be
around 123 leisure speaker
one twenty five, twenty five pixels.
Now for the text itself or the header,
we could make this a little bit smaller again.
And that's it.
What do you think?
I think this is fine. 80 pixels for the header.
Reduce the height of this section to 700 pixels,
reduced negative margin as well.
And I think this is fine, although be careful,
do you see right now that if we expanded
the table to the maximum screen size,
you can see we now have the whitespace showing up.
So that should tell us right now
that all okay, hold on a second.
We need to increase the negative imagines,
actually, that's another thing you should be a well-off.
Whenever you are applying
negative margins and responsive mode,
make sure you are applying negative margins
to the biggest screen size possible.
This is the biggest concise as possible for
the tilted view at 1024 by 878,
we're going to increase,
or rather in this case reduce the negative margin.
Because when you are negative we are
reducing that. It's all 158.
Just about does It's, so now,
if we bring this down to the smallest size for tablet,
we're still not gonna see any white space.
And that's that.
Okay, I think this is fine for the tablet.
Let's now make some changes to
the first or the second section.
And this gives right now, what do we need to do?
For the tablets? We can add some padding.
Alright, we're going to go in here and it's section.
Let's go to Advanced.
And right here, let's just add some padding.
We can go to the usual 25 pixels and
then an effect pixels for the bottom as well.
Let's cool down here.
We'll do the exact same thing in here as well.
I'm going to show you something really cool.
25 pixels from the top and
then 25 pixels from the bottom as well.
I, now, if you look at this,
you'll realize that it actually doesn't look that great.
I mean, you've got an image right here ball,
the texts, the texts column is a little bit too large.
It's a little bit too tall.
Awesome goes with the second section as well.
So what exactly can we do?
The simplest thing we could do would be to simply
make each column go a 100% in width.
So instead of having two columns will
have to come side-by-side.
We'll have two columns on top of each other.
So as an example, right here,
if I gave this first column in here,
we're just going to give this one or
one hundred, one hundred.
And then we're gonna give this column and also 100.
And there it is.
Right now, even if we expand to
the biggest possible size on a tablet,
I think it looks okay.
This looks fine on a tip,
but just make sure the images are large enough.
One change would just need to
do right here would be to add
some padding to this Learn More button.
I'm going to click in there, go to
advanced pattern and the Buddhists add at the bottom.
We'll add some padding in here.
Let me say 25 pixels might be a little bit too much.
In this case, maybe 15 pixels.
15 pixels is fine.
And there it is.
Okay, let's do the exact same theme symptom here as well.
I'm going to click on this column right here.
The goto, the column width.
I'm going to give it a 100.
And then the second column in here as well, 100.
Okay, and then take a look at this.
Ideally we want to have this column right
here on top of this column.
How do we do that?
Well, we're going to do is to simply go to this section,
holding these two columns,
go to section, go over here to Advanced.
Any right here on the responsive.
You're going to see this option to reverse the columns.
We're gonna do that on tablet.
We're gonna do that and mobile as well.
Now you can see that the child,
the best versus column is now on top of the mountain.
And that's exactly how to do that.
I'm just gonna go ahead and add some padding
to the landlord button in here.
Padding at the bottom, 2515 pixels.
I believe it was an M&A is okay,
so let's go back on top.
Scroll down.
K.
We got plenty of spaces.
All righty.
Okay, Looking good, looking good.
Now let's try to reduce the size to the
smallest and see if there's anything
we need to do in here. It looks okay.
Looks perfectly fine.
And there it is. Okay.
That's it for the tablet view.
What about the mobile view?
Let's switch to mobile.
Alright, so obviously the banana in here,
we'll need to fix that one.
Well, I'm just quickly scroll down in here and
see the rest of the page.
The rest of the page looks actually quite good.
Yep, This looks good.
Everything is now in one single column in
which we've used in one column,
and then the Contact page.
So all we need to do right now we'd be
to handle the banner.
So let's do this. I'm going to scroll up here.
Let's go over to the section.
All right, The first thing we will do right now
is for the heights.
It's a minimum height, 700 pixels.
This is of course inherited from the tablet view.
Let's see if we can actually maybe
increase the size a little bit.
Actually.
I think 879, Let's try to get something a little bit,
even like 870 pixels maybe.
Let's try to increase the size a little bit to
the largest size for the mobile view.
Now you would notice that there
is a little bit too much of a negative margin
because you can see the blue line and you
can see the logo are shown up above.
So what we're gonna have to do
right now is to go to Advanced.
And then for the negative margins,
let's try to, actually,
we don't need it in any negative margins.
Actually was gonna make it 0.
Yeah, Let's just make it 0 since we
have a blackout background anyway.
So what does McDonald's 0?
This is for mobile.
Alright, so from here,
let's reduce the heights.
We're going to reduce the height off the page now of
the banner rather something reasonable.
Let's see. I think 535. What about 530?
I think this is fine.
Five-thirds hill looks fine. Scroll down.
Okay. Yeah.
I think you'd be fine. That's making are very small.
And see.
Okay, So the texts can become,
is a bit too large actually.
So let's do this. I'm gonna go
back to edit the heading epigraphy.
We're gonna do is we're going to
try to make this as small as we can.
And now if we expand the largest for the mobile view,
what you have here is, okay,
so this brings us to a new discussion.
Silicon is right here at the largest size for mobile,
the Texas, it'd be too small.
If we try to increase the size here,
it looks good on the highest
possible screen size for the mobile.
The issue I know is that if we reduce the screen size so
the smallest possible size for mobile,
now that text is a bit too large,
what you can do in this kind of scenario is to switch
the style size unit from pixels
to the view port rated review the VW or option in here,
the VW is the viewport width.
What we will try to do is to try to adjust the size of
the text based on the width of the screen size.
So check this out.
I'm gonna go switch over now to VW.
And let's try to go with a size of ten.
For the highest.
This is the highest size,
screen size for mobile.
And then if we reduce the size up onto the smallest,
you can see that the text is actually also reducing.
As we reduce the size of the screen.
That's one tip I can give you right now,
just simply switch to VW as opposed
to pixels or K. So perhaps,
maybe one little thing we could do.
One final thing we could do again will be
to reduce the height a little bit further.
Let's say 450 pixels.
That should be the last change.
Let's try to make this one smaller.
And there you go.
Okay, I think this is, this is fine.
This is fine at this point.
All right.
There you go.
Let's just scroll down,
see what else we can do.
That's pretty much it.
I think we're fine.
Let me just make this one really small.
Evidence, one column.
And there it is,
okay, One last thing,
last thing we could do is
maybe reduce the size
of the button here just a little bit.
So let's go ahead and edit the bottom
right here we're gonna go to style.
Actually, gonna go to style.
Then for the typography right here,
Let's quick in their size mixture.
Of course, this is set to mobile,
and then we'll just go ahead and maybe make this one.
Let's see.
Faults and pixels, maybe 14 pixels,
or what else can we change?
We can of course change the border radius as well.
Let's bring this one down to,
let's say five pixels.
And there it is.
Okay, now here we could try to make the size too small.
Actually haven't tested this.
I'm not sure if this would affect the tablet view.
Is is going to affect the tablet view and
even the desktop view is will always be small.
This is up to you could decide to just make,
make the button small.
All across all three are screen sizes.
Or you could just go with a medium.
I think medium will be fine for mobile.
All right.
That's it.
I'm going to go ahead now updates.
And there it is.
We have successfully built out in
a responsive our homepage.
Thank you for watching and of course I will
see you in the next class.