All right guys we are back once again here.
I welcome you to the second part of the actual creating of the responsiveness of our website.
All right.
So without further ado and without any Jewish stock Let's get right back into it.
OK.
Open up the brackets here that we have already opened.
And then I have opened up the life preview on our Web site which is this right here.
And the last lecture we have made the prosection responsive and now we are continuing on to the ad features
section.
OK.
So as far as I know this last year was to be features in the HD.
And these were called dash for that app.
And this was 0 age treat let's make sure that is correct.
So there is the features paragraph that is the heading 3 and that is the call dash for Dash app.
All right so with that three classes we're going to need those in the lecture here.
And let's get right into it.
So and these same screen size.
Eight hundred and twenty pixels Let's start creating and fixing these columns here because they now
start to look distorted.
They don't look good in my opinion there.
They need some fixing.
All right.
So first off this paragraph here.
One thing that bothers my eyes right now is the whitespace on the left and on the right of this paragraph.
So if we look for the features we can see that it has a 100 and 30 pixels or padding on the right and
on the left.
Now we want to reduce that in the media query here by just typing plain and simple.
B dash features and reducing the padding to 30 pixels on the left and on the right instead of the earlier
number.
And we can see now that the paragraph is better looking with no not much whitespace on the left and
on right.
All right into the next thing that we want to do is select each of these columns separately and we do
that by DOT call dash for dash.
We can see that all these three columns are getting selected here.
OK.
And if we remember from the earlier lessons we can see that these each one of these columns is 33 percent
in with.
So the total percentage would be 100 percent of the container.
So if we just make sure that's the real deal here we can see that a call for app is with it's thirty
three point thirty three percent and all of those are floated to the left.
So what we need to basically do now it's pretty self-explanatory.
We are getting these three columns like that and I want one of these columns to be stacked on top of
the under one.
And I want one of these columns to be with 100 percent.
I want each of these columns to be 100 percent.
OK.
So we're basically state that here.
But right now it is working.
But these columns as you can see now they're taking 100 percent of the available space here.
But the float option to float rule is still applied to them float left.
Remember we don't want that.
Right now we don't want any kind of a float because the columns look good the way they do now.
So we we just do float none.
We're probably going to see any difference here but that is the correct markup and off we go now where
you can see that there's not enough whitespace between the image and the text here so what we can do
is after each of these called dash for Dash icons columns add a margin to the bottom so aren't bottom
of 50 pixels and we can see that now.
And the content is split.
There is enough whitespace and that is perfect.
This is perfect.
But at the center.
Everything here is center Deros are now stacking one on top of the other one.
This section here seems pretty complete to me.
The lady is disappearing but we cannot do much more about that.
The background is still present here with the gray color so we're just going to ignore that the lady
is not visible here.
Technically there's nothing we can do other than this.
Everything looks fine here.
Even this section at this resolution looks fine but it doesn't look fine.
Is the icons here.
So they're pretty much stick to the top of these next year so all we can do is select all the corporate
icons so the classes will be f b t w and d r.
And if we do that so select
the f b t r DWM sorry and and D are for a dribble and you add a margin to the top of 20 pixels.
I think everything will be fixed the that is correct.
Right now at this resolution the website looks pretty perfect to me except for an navigation bar that
will be taken care of in the next lesson.
So let's try to shrink down to size even more.
For example let's try to use one of these presets.
OK.
So let's click on seven.
This seven hundred and sixty eight.
It will shrink down to size even smaller so the width is seven hundred sixty eight.
We put signs and now we can do let's see what's wrong here.
What we can actually do because now the text is getting smaller and it's line Hydes getting also small.
I think this looks pretty clustered here right now.
So we can do is basically do the very same thing that we did in these columns here.
So that would be serving the width to all of its columns to 100 percent and setting the float to be
none and then adding a bit other options.
But before we do remember the viewport is seven hundred sixty eight and we need a new media query for
that.
Just copy this paste it and change a number.
So all the cells will apply once we reach that screen size and if we select the call dash for Dash footer
which I remember is exactly that class.
Here again if research for call dash for Dash footer and the original Seyed we can see that it is again
33 percent.
So what we can do now is select the with to be 100 percent of the screen size and then flow with none
because they were floated to the left again.
So right now we can see that they are looking pretty nice.
Now there is this space here that I don't like.
And if we do inspect element and if we check on what this spacing is we can see that it's the margin
top of 77 pixels none has been debugged.
What is it.
Now we can do margin top of the 0 pixels but notice that once we open up the inspect element D life
preview shuts off.
For some reason so I'm just going to need to refresh now for the changes take place and we can see that
the margin on top of all of the columns here called dash for dash for columns is gone.
All we can do now is try to increase the font weight to 40.
So the text looks a bit more clear here.
And that's pretty much it.
Now I think these lower should be more separated than these other posts here so if we selected logo
which class was future Dasch logo it's not life pretty.
Right now remember because we have inspected the element here but if I select a future logo and then
add a margin to the bottom or 30 pixels and if I refresh we can see the space will add up just a little
bit.
We can try even to be thirty five pixels if you think that would be necessary.
So there it is.
DS here still looks fine to me.
Let's try to continue to trim down their size.
For example well let's see.
OK.
Let's say at this very point here of 700 pixels so create a new one of 700 pixels and all we can do
here is remember how we did set these bricks here is horizontal I'm sorry vertical bricks.
They were set to weight after position after and before.
So after every C R and me class which is the copyright and to me the website class we have added a content
of one pixel and a margin to the left which is basically this vertical line here but if we copy this
and say that was the screen read 700 in with dots or after and Dot me after instead of the content displayed
do display none.
And if it refresh Now if we refresh again we can see that those lines are gone and now everything looks
perfect.
And if we shrink down to size you add more.
They all look centered right now.
And if we're showing the size you or more let's take the rest of the Web site and look.
Pretty amazing for me even at this small screen size.
Is everything is still centered here everything is readable.
Now my suggestion would be to check for the screen size is as low as three hundred and eighty pixels.
If everything looking fine here then do abseiled which is ready to be deployed.
It will look good and every screen size.
So so far everything looks perfect but what's left to do is the navigation menu here.
So let's say for example we're going to edit that in the next lesson.
But let's say that once a screen reach is 1 800 I'm sorry eight hundred and forty pixels we will create
a fully responsive navigation menu that will be working without any problems and it will be on click.
But the cool thing is are we going to be building this with C Ss 3 and no javascript.
So there's plenty of ways that you can create this right now.
I'll be using a one way that you can create navigation menus using only see SAS if that's exciting.
Join me in the next lesson and I'll see you there.
Thank you for watching.
Peace out.