Voiceover: In this lecture, we'll continue
to make our website responsive.
So the next thing we can do here,
is to remove some white space, for instance,
here...
And here between those steps,
and here between the steps,
and the button,
and we will also increase this image a little bit
and so let's go do that.
We're still here at this media screen
which will target from small tablets to big tablets.
Alright, so we can start with the steps box,
and let's say that it should have a margin top
to only 10 pixels now.
So I'm, as I said,
starting to remove some of the white space here.
So it also have the works...
steps, right,
and I will say that I want the margin bottom to be 40 pixels
I think it was 50, if I remember it correctly,
but, let's check it.
It's old form...
How it works section, okay,
so the steps box had 30 and 70
and now I'm going to set them to 10,
and I'll actually have to do this
for the steps box last child as well.
Okay so the work steps, had a margin bottom here of 50,
and I will have to set this one here as well.
So let me copy this,
and I'll also need the steps box last child, right?
So this may be a little confusing,
cause, y'know it's a lot of code we have to change here,
so if you want you can then later review the code
a little more slowly.
So I want this to be 10 pixels as well,
and now between the last steps and those buttons,
I will say 60 pixels should be enough,
and I will also now decrease the app screen,
which is the image,
and I want a width
of 50 percent,
so increase it from 40 percent to 50 percent.
See it was 40 now it will be 50.
Okay I'm going to reload this thing now.
Well this looks much better, right?
Let's re size it.
Okay, so, here we have our break point,
at 1023
What does this... how it looks like?
And as we get it smaller,
so this is the other break point,
okay,
so this section looks good now,
and now we have a little problem in here,
because those icons are way too wide,
so let's go back and reduce their width,
and also I should actually decrease the font size in here.
So, those icons are icons small class,
so let me check them.
So they had a width of 30 pixels,
now we'll decrease that,
to, let's say, 20 pixels,
and then...
the city future class,
I will decrease it's font size to 90 percent.
And let's reload this, and it looks much better.
So there is still, like a line break here
on some smaller width like this one here,
So...
We will decrease it even more
to 17 for instance,
and let me check it again,
this margin right can be set to five pixels.
So you see I'm changing a lot of stuff here
and ya, I'm doing that because it really is important
to make our websites look good
on any device and on any width.
So this doesn't change so much actually
but, well, it's the best we can get right?
So in here, everything looks okay,
and now, so these boxes have a width of 90 percent,
and a margin left of 5 percent to center them,
so I'm going to change that
down here and these are called plan box
and so let's change now the width and say 100 percent
and the margin left to zero percent.
Let's check it,
it's better and now let's decrease these font sizes here,
and there's also some weird thing going on again
with the HTML so I'm also going to fix that,
but let's start by reducing the font size here of this.
And that is the plan price, right?
Actually going to copy this one,
and put it here.
And let's say you want it in 50 percent,
so the code is getting much bigger
and it's not always easy to find
the stuff that we want to edit, right?
Pdat is the problem, let's adjust that,
Alright, so,
alright and now,
just let's
increase the width of this contact form class as well.
Contact form...
And 80 percent.
So we still don't want this to be full width,
but a little wider is better.
Alright,
so this looks good now.
So we fixed everything in this media query here,
so now let's get to the next one,
and this one is for small phones to small tablets,
for instance, the iPhone six,
so I will put this browser to this lowest width
of 481 or 480.
So...
You see the width up there,
and 480 is absolutely very small,
let's say like 500, close to 500.
So, a lot of things going on here,
all of this looks quite bad right now, right?
So that's what I mean we really need to adapt this,
look at this button.
And you also notice a strange thing here,
which is this here,
so now we have this problem
because some of the text goes out of the actual width.
So, let us fix that and it's easy to do.
We just need to
add a new style here,
which is overflow x, and then hidden,
so now that will get hidden,
and we actually should do the same for the buddy,
and we can actually add buddy here,
it's not such a big difference.
So now that will be fixed and problem as well,
so let's go back to our queries and start adding some code
to this media query here.
So I'll start by reducing the body font size even more,
to now 60 pixels,
and the section
I will reduce the padding between those
so the white space between those
which we set to 60 before
but now we have really small devices
so let's say 30 pixels and zero.
And now the padding at rows,
we set it before at, yep, two percent,
but let's set it to four percent now,
so row
and also this box this hero text box,
this is equally important
in the header.
So let's set their padding on the left and the right side.
So zero in top and bottom
and four percent at left and right.
And before we go check how this looks,
we can do one last thing,
and this is,
that we now want to
define the width of all the columns as 100 percent
which means that the columns will no longer be
side by side but will be stacked on top of each other.
So let's see what that looks like.
Alright here we go,
still have this problem here
I'm going to talk about it in a second.
So, this is what I was talking about,
those are now on top of each other.
Right here we have some weird stuff going on,
I'm going to fix that in a second,
those images are way too large,
and down here everything looks quite good.
But, yep, one thing after the other.
I'm first going to fix this navigation,
and in fact, we're going to build a mobile notification
in the next section
where we will start learning some jQuery
and so for now, I'm just going to hide all of the navigation
and that's pretty easy to do actually,
I will just say
main nav...
display none
and this will hide the entire navigation.
Alright...
The class name...
Okay and that looks better for now
So, I'm not going to change every little detail here now
because, y'know, you can change that later on yourself,
I'm just going to fix the most important thing now,
which is for instance, this margin here,
so I now want this paragraph to be 100 percent wide as well
so that's one of the things that I'm going to change
then we can probably make these
H2 elements a little bit smaller
and the H1 element as well,
and then take away some more white space here
from this section will also be important,
and I think down here most of the thing look pretty good.
So, no need all this space here,
you already had changed the long copy here
but now I'm gonna go even further
and say 100 percent in margin
zero percent
but then as I said I will also
reduce the font size of the H1 element.
So font size
let me say
180 percent
and I will duplicate this for the H2 element
and reduce the size to 150 percent.
Okay, and now,
going back to
this code here which is for the how it works section,
let's make this white space even smaller here,
let me check how it looks
so that I know what to change here,
so the most important thing is to reduce this here, right?
So let's do that, so we don't need this,
probably 20 pixels is great
and here also 20 we don't need so much white space.
And one other thing I should do there
is to reduce the circle in the work section,
so let's change this here maybe to
40 pixels
and 40 pixels here as well
we'll of course not change any of those.
Change this to 15 pixels,
and also decrease the padding a little bit,
so make all of the things a little bit smaller.
Okay, something is not working here right now,
this space is still way too big.
I guess because I misspelled this right here.
Okay, now it looks better,
and I just need to change the font size in here,
and to, of course, put this image here in the center.
So font size,
100 percent let's say...
120 in fact
and...
So where is that...
So this is for the image,
so the steps box first child,
I now want it to be centered.
Alright, let's just re size this a little bit.
Woah the image is so incredibly big now
so we better make that a little bit smaller again
so where is that...
Here it's app screen,
app screen and I'm going to change that to 40 pixels,
okay looks like the correct size now,
alright,
so as I said I will let you tweak other minor things
here on the website on your own with your own CSS
but there's still one thing that I need to fix
and it's this here.
You see, these columns doesn't start
at the same point, right?
So the first column is different that this one here,
and that is actually because I forgot to change one thing
and it has to do here with the column
and this comes actually from this grid file,
so all columns have a margin
which is this one, let me copy it, to our query CSS
so that we can change it to what we want.
So currently we have a left margin of one percent
zero percent
at right side,
one percent bottom, and one point six on the left.
So now we don't want anything of that,
we want the margin to be zero here,
zero on the right,
and on the bottom is the only place we want some margin,
because we want, y'know,
we want some distance here between those boxes,
so let me put this to four percent and this also to zero
and that will now fix this weird thing, ya,
and this looks much better
now we have some space here between the boxes,
and they all start at the same place, right.
So I think this looks cool now and...
That's now...
Look here at our last media query
which is for really small screen sizes.
Let me just put this here
like actually can put it smaller than this
and it still looks good in here
so I guess maybe not so much to change.
So all I'm going to do is make this form 100 percent wide
and to remove even more padding between those sections
because we have to imagine that it's a really small phone.
So let me just make some minor changes here in fact.
So I will say section
padding we had 30 pixels let's say 25 now
and zero left and right
and the contact form
can have a width
of 100 percent
so I just didn't want to leave this empty
but in fact it maybe was not so necessary
but who knows maybe in your future websites
you will actually need this media query.
So I'm going to reload this for the last time...
And so this is our website on a mobile phone,
so feel free to change some more stuff here on your own
because now you know how all of this works,
but I'm going to leave it as this.
So, we are now done
with the HTML and CSS part of our website actually
so congratulations, in the next lecture,
we will just test this website on different browsers,
which is a very important aspects of web design
and web development.
So see you there.