WEBVTT

00:00:06.700 --> 00:00:12.170
Now you are going to control the behavior of our Web sites in small screens.

00:00:12.510 --> 00:00:19.980
So we're going to start with the kind of cell slider we're going to set the image size in small screens

00:00:20.580 --> 00:00:26.020
as well as the font size of the headings and they're going to move to the background video.

00:00:26.250 --> 00:00:32.100
So as I mentioned before the background video is not going to work in small screens so we're going to

00:00:32.250 --> 00:00:35.980
need to replace it with a picture.

00:00:36.200 --> 00:00:36.470
OK.

00:00:36.480 --> 00:00:43.590
So let's have a look at the final Web sites and understand the behavior of our sites in small screens

00:00:43.590 --> 00:00:44.560
.

00:00:44.640 --> 00:00:53.490
So if we start from large devices we start reducing the width of our page.

00:00:53.490 --> 00:00:54.900
We're going to have to breaking point.

00:00:54.900 --> 00:01:04.650
So the first one is going to be art 760 pixels and you will notice that's the heights of the pictures

00:01:05.880 --> 00:01:08.110
has been reduced.

00:01:08.110 --> 00:01:16.000
And also the font size of the headings inside the carousel has been reduced as well.

00:01:16.080 --> 00:01:16.860
If we carry on

00:01:19.980 --> 00:01:23.790
then we're going to have another braking points out of 100 pixels

00:01:26.670 --> 00:01:30.140
where the image size changes.

00:01:30.210 --> 00:01:31.760
So the height has been reduced as well.

00:01:31.800 --> 00:01:35.370
And also the Hedding font size has been reduced.

00:01:35.460 --> 00:01:36.950
OK.

00:01:37.860 --> 00:01:51.900
I think you will notice there's the font size of the Navar brand is going to change as 400 pixels as

00:01:51.900 --> 00:01:53.400
well.

00:01:54.600 --> 00:01:55.850
OK.

00:01:56.100 --> 00:02:04.290
At the moment if you look at our Web sites if we keep reducing the width at some point we end up with

00:02:04.740 --> 00:02:08.620
two lines one line for the number run.

00:02:08.790 --> 00:02:12.970
Another line we talk about and what we don't have that's for the final websites.

00:02:13.150 --> 00:02:15.090
OK.

00:02:16.530 --> 00:02:20.360
All right now let's implement this.

00:02:21.140 --> 00:02:24.490
Why go into the siestas file.

00:02:25.920 --> 00:02:28.810
So we're going to be using media queries.

00:02:29.160 --> 00:02:34.560
OK so we're going to start with devices and the 768.

00:02:34.560 --> 00:02:38.270
So are you going to use the syntax that were used before for media queries.

00:02:38.280 --> 00:02:48.480
So at media and then in site penances we're going to set the conditions so maximum width of 760 pixels

00:02:50.310 --> 00:02:54.210
and then between curly brackets we are going to write our styling.

00:02:54.600 --> 00:02:57.540
So we want the images inside the carousel slider

00:03:00.330 --> 00:03:03.110
to have a specific height.

00:03:03.150 --> 00:03:03.890
OK.

00:03:03.900 --> 00:03:10.360
So to do this we are going to access the carousel.

00:03:11.340 --> 00:03:17.330
And then the item is in the Item class and then the image OK.

00:03:17.840 --> 00:03:24.990
Are going to set the height of the image to 300 or originally it's 400.

00:03:25.000 --> 00:03:30.390
The first great breaking points we are going to change to 300 and also we are going to do the same thing

00:03:30.390 --> 00:03:33.300
for the Hedding font size.

00:03:33.590 --> 00:03:37.320
OK.

00:03:37.500 --> 00:03:39.360
And we're going to change its font size

00:03:44.550 --> 00:03:47.450
to 23 pixels.

00:03:48.780 --> 00:03:49.360
Okay.

00:03:49.620 --> 00:03:59.250
And then you can do the same thing for devices under 400 pixels.

00:03:59.250 --> 00:04:07.740
So this time the heights of the image is going to become 200 and the font size of the headings is going

00:04:07.740 --> 00:04:11.850
to become 17 pixels.

00:04:12.360 --> 00:04:18.270
And if we look at the Navar brand

00:04:22.250 --> 00:04:29.160
OK we are going to change that by changing its font size so to access is we going to go first to the

00:04:31.030 --> 00:04:39.720
Navar consume and then inside that we are accessing the number brand.

00:04:41.940 --> 00:04:42.730
Okay.

00:04:43.140 --> 00:04:48.680
So we are setting the font size to 12 pixels.

00:04:49.140 --> 00:04:53.220
If we use only Naba brand that's going to be enough.

00:04:54.330 --> 00:04:54.780
Okay.

00:04:54.870 --> 00:05:02.740
So if we look at our Web sites now and see if this is working.

00:05:05.250 --> 00:05:07.620
So if we start reducing the width of the screen

00:05:21.420 --> 00:05:23.470
you can see the first breaking point.

00:05:23.650 --> 00:05:24.510
Okay.

00:05:25.110 --> 00:05:29.620
So both the height of the image and the Hedding font size changed.

00:05:29.820 --> 00:05:35.190
And then thats one of the cells the height of the image

00:05:42.010 --> 00:05:43.940
changed as well.

00:05:44.100 --> 00:05:44.580
OK.

00:05:44.640 --> 00:05:47.920
The Hedding font size changes as well.

00:05:48.810 --> 00:05:56.940
And if you look at the brand on our brand we can see that as one of the cells the font size changes

00:05:57.060 --> 00:05:58.190
.

00:05:59.380 --> 00:05:59.800
Ok

00:06:04.860 --> 00:06:09.930
now lets look as the background video device is under seven hundred sixty eight pixels so lets copy

00:06:09.930 --> 00:06:19.560
this code and go to the background video section for small devices.

00:06:20.310 --> 00:06:28.230
So for devices under 768 pixels we aren't going to use a background picture rather than the background

00:06:28.230 --> 00:06:29.160
video.

00:06:29.580 --> 00:06:31.380
So it is the least the styling

00:06:34.420 --> 00:06:38.250
and style the body element.

00:06:41.230 --> 00:06:45.570
So we're going to give it a background property.

00:06:45.930 --> 00:06:49.620
Also we will need to hide the video.

00:06:49.620 --> 00:06:58.260
So lets access the video using its ID which is background video and it is using the display property

00:06:59.360 --> 00:07:00.770
.

00:07:02.310 --> 00:07:09.160
So we are going to set the background property of the video using a picture.

00:07:09.450 --> 00:07:10.470
So to do that

00:07:13.890 --> 00:07:22.980
we're going to use a nice web site pixel's those come where we can find free pictures.

00:07:23.370 --> 00:07:28.980
So the picture I'm going to be using is this one.

00:07:29.820 --> 00:07:31.000
OK.

00:07:31.020 --> 00:07:38.670
So it is going to copy the URL inside the background property.

00:07:41.280 --> 00:07:43.170
OK.

00:07:45.090 --> 00:07:45.390
So

00:07:48.390 --> 00:07:54.890
we are going to sensor the background image using the volume sensor sensor.

00:07:55.410 --> 00:08:00.450
And also we're going to make it fixed as we've done in several products before.

00:08:01.080 --> 00:08:03.900
And finally we are going to set the background size

00:08:07.200 --> 00:08:10.640
to cover OK

00:08:13.980 --> 00:08:20.540
so that it will make the image expand across the web page.

00:08:20.740 --> 00:08:21.130
OK

00:08:24.350 --> 00:08:31.920
so let's always try this in large screens because our background video.

00:08:32.280 --> 00:08:38.310
And once we go under 700 sees pixels we see it's