OK, guys, so in this video, we're going to start with the medium screen, the first thing we can
do right here is to go to the X and find we can add X are here, reload.
So now where is the horizontal line?
It must be here.
Let's make it here.
What about now?
OK, so now we got the horizontal line after this part we can give here, give us a row and then each
side we can make or we can just copy all of the previous copies, all in the video we will make for
the medium screen.
OK, let's go now to assess what we can do as first is to here the class of medium and one we can copy
this part to be one, two, three, four, five, six, seven, eight, nine.
10, 11 and 12.
OK, that's good.
And now after this part, we can go to the Green Dot team and see what we can do for this part here.
We got the beginning.
This could be making medium.
Medium I.
OK.
Again and again, and now the next mission is to go to the responsive design just because here it will
not be very good will reach the screen.
It will be always one and 11.
OK, so after this part, what we can do is to just a moment, please.
OK, we got something here for the response because of this text, if would you like this text in this
text?
I think this ones we be having no problem.
So now when we go and do this design, we can just copy this one.
And very soon we will add a class of container to prevent this exercise.
It's actually scrolling.
We can cover this one from here and add some white space and basically here.
But instead of from this one, we can make from nine nine two pixels on two or three, this one to be
seven, six, eight pixels until we reach the nine nine one point nine eight pixels instead of the small.
I want it to be a medium we can call the medium.
Here, here, here.
Again and again.
Yes.
So.
OK, that's good after this part we've seen before, a 12 B column, 11 column here where it gets.
Here we've seen that it will be column one and 11 all the time, but what when we add these classes,
we can go here.
Let's go to the first one, OK?
We can bring the line here or just add Devon Marshall and put them before for here.
We can't print the line.
OK, so now we got this distance.
We can make this one to be for the medium.
I mean, as we've seen before, it will be always one and 11.
But this was in case that we didn't add the responsive design for the medium screen.
We can go and reload it when we go here.
This was the small screen.
We are having nothing different.
But when we're age of a medium, this will be having one and this will be eleven.
OK, that's good.
Now we can try for the second one, this one here, this one to be for the medium ten, this one to
be for the media.
So now this one is taking the colon too.
But when we reach the medium screen, this would be having the colon to when we go here, this is the
small screen.
We got nothing different.
But when we reach the medium, we are having this now with colon and of two and this with colon and
of ten, we can make this small again.
This won't be for.
The medium and medium, let's see what we have here right now.
This is for the column three, but when we reach the medium screen, it will be column nine.
Yes.
Very soon.
It's here, so now we got this with Galloon M.G. Medium and this to be column and the three.
Let's try now for the green one right here.
Let's be medium and just be making.
We just want to make sure that everything is working fine.
We can save a little pack.
This one here, this is column for.
But when we reach the median.
We are having this with Colin MDH.
And this to be with four, OK, that's good, we can go back and forth, this one, we can just make
this to be for the medium and medium we can reload.
OK, so now having the column five when we reach.
The medium screen it will be have been called seven and the second one will be having colon five.
OK, so here we got this column seven and column five.
This is larger than that.
And for the last one, this to be Meanjin and Major, save it, go back, reload.
So this will be always six.
So it will be making those sense.
Thanks all about the medium screen, we can try now for the last screen.
It will be very easy.
We can just copy and paste because it became much easier.
Right now, we can't copy all of that right here.
But let's go here.
And it's one the medium screen.
We can copy this one right here.
OK, all of that and fix it here.
This will be for the large screen.
We can go to the system.
Where is the and from here, all large and things.
We can cover this right here.
One, two, three, four, five, six, seven, eight,
nine, 10, 11 and 12.
OK.
Now, this is good.
This is for the medium screen.
We can just go up here, copy.
We can make this plane larger.
OK, we can cover this one right here.
And, uh, sorry, this one.
And we will just edit the minimum wage and the maximum with we can add some white space in
this one to be from there nine nine to pixels and then we can make four.
The one one nine nine point nine eight pixels, which is the largest screen we have here, the large
right.
Yes.
And then we can tie the algae, we can cut this one, which is the larger
based console.
OK, that's good.
And here, la, la, la.
OK, and here we can just change this one to be four words that no, not this one, this one right here.
And we can scroll here and try for the larger.
This will be larger, larger, larger and larger.
And then after this part, we can save and go back.
This will be 11.
And this will be one until we reach the lower screen, which is from the nine nine two pixels.
We can go up here as sorry, we can make the screen larger right here.
So when we reach the nine nine two pixels, this is having the column 11 and this is having the column
one, we can try now for the second one, which is here larger, larger, larger and larger size.
This one here, we can make a screen larger right now, OK?
When we're using the large screen, we are having Bestway 10 and this we have to we can go back the
second one, which will be for the large nine, larger, larger and larger.
And because they've got a pet, so now we got this page and where is it here, we can make a screen
larger to see that everything, if everything is OK or not OK.
When we read the large screen, we will be.
Yes, three and nine.
And then here we've got four.
The eight cover this one percent here, here.
And no Savea.
Go back for this one.
Let's make this screen larger.
OK.
Uh.
This one here, so here we got Khanum last eight and call them large for and of course inside can add
them small and medium.
Then after this one here we got four large seven and large five.
Reload this one here when we make this clean.
OK for this one.
So here we got the seven and five and for the last one we got here the.
Yes where is it.
This one here, larger and larger.
This to be one for the lower and for the last and can save and go, OK, we can make this crane larger
right now.
It will be always killing six and six.
So there is no difference.
This part, the last golden we've got here is the column X large.
We are done from the medium and Olivant and we will try now for the X large one foot, which will be
the last one.
Or we can just make something different.
We can make from the one, two or three pixels to the one three nine nine point nine pixels and the
x x large to be starting from the one four zero zero pixels.
We can just copy this media.
Some white space based here and this one to be from one to deal with the pitfalls of trying to reach
the one three nine nine point nine eight pixels, then here this would be Ford Explorer, Explorer X
large.
X large.
Yes.
Again, until we reach that 12.
OK, that's great, now we can go to the files and we can copy all of this part right here, did we
add here in each one?
No, that's one the large screen.
And then we can copy this part right here.
All of that.
We can add some space right here, delayed the closure of the plane,
so he'll be got for the large screen when we get to the large.
Got no problem with that.
OK, that's good.
After this part, what we can do is to go where?
To the grid system and add coal class.
And a number would then cover this part because we can add here one, two or three until we reach that
12, two, three, four, five, six, seven, eight, nine, 10, 11 and 12.
And then we can go to the largest and the explorer screen right here.
And that's the last one.
Yes.
This will be for X large screen, OK?
And for this one to be for the X larger X larger explorer explorer.
So we'll be having the call them the one and 11 until we reach the lower X large screen, it will be
having 11 and one we can make the screen larger.
So, man, we got this for the.
For the large screen and now that's good, we learned about the medium and the, uh,
the large and all of that, I think we got something here.
No, no, no.
We got no problem.
OK, that's great.
And then we can go here.
No, no, it didn't refresh.
This was the problem.
Let's make this screen larger here.
When we reach the explosion, this one here and having column one and this one is having thought this
one is having column 11 and this one is having that.
And one, let's make the screen smaller again.
This one to be for the slower and slower and slower and slower fade and go back.
Now we got this and then we can make the screen larger to make sure that everything is working fine.
So now we got here the column ten and the column two.
We can test before.
And this where?
Yes, this one, no.
This one, the right one, expand and we can make it.
Excellent, excellent, excellent again and excellent.
So now we got this when we make this screen larger.
So now we've got these with them three and this will be column nine, we can try now for the Green.
This one right here, a large X large AI class and a class refresh.
We can make the screen larger right now from here.
Yes.
So now we got this and this is perfect.
We can go back and try for this color.
I think it was a violent explosion, x large, x large, x large, save a pack when we make the screen
larger.
So here we got seven, eight, five, the last the last one, which will be for the sixth, it will
be making no sense because they always say, OK, we don't need to test for the last one.
We can just copy and paste it, the media, because it will be the same concept at some space.
But we can just like this one or we can delete the maximum and make this to be one for you.
And also, we've got minimum height if we wish to add some height.
OK, then.
So about this part.
In the next video we will add a dev, which is called container, so we can prevent some of this scrolling.
We can up the impact from here to see this problem starting from.
OK.
I think it will start from the small screen.
Yes, it's starting from the small screen, I think, but before the small screen of the small screen,
starting from.
Uh, just let me see let me see it again, it's starting from where the five six.
Yes, it's starting from the small screen in the next video, we will know how to deal with this part.
So good luck and have fun.