WEBVTT

00:00:07.380 --> 00:00:13.570
Now let's have a look at our final Web sites and see how it behaves in different device sizes.

00:00:13.620 --> 00:00:24.270
So if we start from large screens and keep decreasing the width of the screen then we will notice a

00:00:24.360 --> 00:00:25.320
breaking point.

00:00:25.420 --> 00:00:32.720
Seven hundred sixty eight pixels and below that points will notice a few changes.

00:00:33.060 --> 00:00:38.700
So first of all you will notice does the height of our Jumbotron becomes smaller.

00:00:39.880 --> 00:00:41.000
OK.

00:00:41.100 --> 00:00:50.340
And also you will notice does the logo size become small as well as well as the font size of the paragraph

00:00:50.360 --> 00:00:52.230
.

00:00:54.250 --> 00:00:55.480
OK.

00:00:55.590 --> 00:01:04.560
And also you will notice that the elements inside the featured content they become centered inside the

00:01:04.740 --> 00:01:10.550
double trying to censor text and also our links are censored.

00:01:10.890 --> 00:01:17.880
If we keep decreasing the width of the screen then there will be another breaking points at 480 pixels

00:01:18.780 --> 00:01:22.110
where it will notice does the logo becomes even smaller.

00:01:22.110 --> 00:01:29.580
The gap between the logo and the heading becomes smaller the font size of the paragraph and the font

00:01:29.580 --> 00:01:33.330
size of the Lings become smaller.

00:01:33.570 --> 00:01:42.380
Ok so to do all this we're going to get introduced to a new CEO says feature called media queries.

00:01:42.480 --> 00:01:49.080
So what we're going to do we're going to use this feature to style screens with the with between 400

00:01:49.320 --> 00:01:54.510
pixels and 768 pixels.

00:01:55.380 --> 00:01:56.100
OK.

00:01:56.550 --> 00:02:02.100
And then we are going to tile screens under four hundred eighty pixels.

00:02:03.400 --> 00:02:06.730
OK so let's go ahead and do this.

00:02:06.750 --> 00:02:13.470
So first of all you get an odd styling for devices between 400 pixels and 760 pixels

00:02:13.500 --> 00:02:21.330
.

00:02:29.100 --> 00:02:29.810
OK.

00:02:30.330 --> 00:02:41.220
So the syntax for using the media queries is arts media.

00:02:41.520 --> 00:02:46.670
And then between penances we're going to insets our condition.

00:02:46.830 --> 00:02:58.740
So we're looking at devices sourcing as one also is going to be men with OK going on one else we're

00:02:58.830 --> 00:03:11.610
going to have another condition going to use and then we want the monks with to be 768 pixels.

00:03:12.690 --> 00:03:13.630
Okay.

00:03:13.740 --> 00:03:19.490
And then inside curly brackets we will place our cyclic.

00:03:19.700 --> 00:03:20.190
OK.

00:03:20.460 --> 00:03:35.040
So first of all we're going to change the doom height so access the Jumbotron class and we'll set the

00:03:35.400 --> 00:03:43.510
heights to 400 10 pixels.

00:03:43.860 --> 00:03:54.040
And also we can take out the margin as well and leave it at zero.

00:03:55.300 --> 00:04:03.780
Also we will make the logo smaller so we access the low class

00:04:07.260 --> 00:04:12.000
and go this time for a width of 50 pixels.

00:04:12.760 --> 00:04:25.400
And for a height of 50 pixels as well then we will reduce the gap between the logo and the heading.

00:04:25.680 --> 00:04:29.760
And if you remember we use the padding earlier for the heading.

00:04:30.090 --> 00:04:33.510
So will access the heading.

00:04:34.290 --> 00:04:39.580
You go to the featured class first and then inside defeated the class.

00:04:39.750 --> 00:04:43.790
We go to the heading H-1.

00:04:44.460 --> 00:04:45.240
OK.

00:04:45.290 --> 00:04:51.430
The heading was inside the featured glass.

00:04:51.700 --> 00:04:52.530
That's co-head.

00:04:52.690 --> 00:04:55.670
So we access declasse first and then the heading.

00:04:56.550 --> 00:04:59.790
So this time we're going to go for a putting top

00:05:02.790 --> 00:05:03.210
of

00:05:11.680 --> 00:05:16.020
those pixels.

00:05:16.440 --> 00:05:17.800
OK.

00:05:18.850 --> 00:05:23.950
Also we will change the font size of the paragraph.

00:05:24.980 --> 00:05:25.220
OK

00:05:27.800 --> 00:05:38.010
so next is the class first and then the paragraph inside the class to change the font size use the font

00:05:38.010 --> 00:05:42.750
size property and we're going to say that to 17 pixels.

00:05:44.020 --> 00:05:47.220
OK.

00:05:47.880 --> 00:05:53.390
Now the only thing left is to censor all the elements inside the.

00:05:54.030 --> 00:05:54.930
And that's

00:06:01.650 --> 00:06:06.750
well inside the featured contents rather than the Jumbotron because you want to leave the logo on the

00:06:06.750 --> 00:06:07.170
left.

00:06:07.230 --> 00:06:12.890
OK so you can to access the featured class and send the text a line to send

00:06:23.080 --> 00:06:27.260
and there are elements of it.

00:06:27.400 --> 00:06:33.830
All right now we're going to do the same thing for the other breaking point.

00:06:33.830 --> 00:06:35.100
So under four hundred

00:06:39.480 --> 00:06:44.010
eighty pixels we're going to make further changes.

00:06:44.250 --> 00:06:49.260
OK let's copy this.

00:06:49.260 --> 00:06:56.770
So we are assigning devices under 400 AC pixels.

00:06:57.300 --> 00:07:07.130
So this time we have only one condition which is the maximum with is four hundred eighty pixels.

00:07:07.410 --> 00:07:08.020
All right.

00:07:08.340 --> 00:07:16.190
So we will leave the Dunwich on its height of when it's Champix else.

00:07:16.180 --> 00:07:17.760
That's right.

00:07:18.600 --> 00:07:27.900
We will reduce the size of the logo to 40 pixels with an enforced pixels height.

00:07:29.200 --> 00:07:29.880
OK.

00:07:30.150 --> 00:07:40.090
And we would use also the gap between the logo and the heading by increasing the putting up degrees

00:07:40.080 --> 00:07:50.460
in the putting up to only 10 pixels and also will reduce the font size of the paragraph and also the

00:07:50.460 --> 00:07:52.360
font size of the links.

00:07:52.860 --> 00:07:53.370
So

00:07:56.430 --> 00:08:06.750
to select both the paragraph and the links we're going to add a comma here and odd the class inside

00:08:06.750 --> 00:08:07.250
the class.

00:08:07.290 --> 00:08:09.290
We are going to the links.

00:08:09.570 --> 00:08:10.740
OK.

00:08:12.400 --> 00:08:16.170
I can also use the bus defaults class if you want to.

00:08:17.040 --> 00:08:18.010
It's the same.

00:08:18.540 --> 00:08:22.460
OK so you said the font size to 13 pixels.

00:08:23.000 --> 00:08:27.080
OK.

00:08:27.270 --> 00:08:28.350
And now

00:08:31.080 --> 00:08:31.660
it looks ok

00:08:31.660 --> 00:08:38.200
.

00:08:38.550 --> 00:08:40.440
I missed a D.

00:08:41.040 --> 00:08:43.110
I know it's better

00:08:48.190 --> 00:08:48.570
or it's