WEBVTT 00:00.560 --> 00:03.270 All right guys we are back once again here. 00:03.270 --> 00:10.260 I welcome you to the second part of the actual creating of the responsiveness of our website. 00:10.260 --> 00:10.500 All right. 00:10.500 --> 00:15.160 So without further ado and without any Jewish stock Let's get right back into it. 00:15.180 --> 00:15.510 OK. 00:15.500 --> 00:18.640 Open up the brackets here that we have already opened. 00:18.650 --> 00:24.140 And then I have opened up the life preview on our Web site which is this right here. 00:24.480 --> 00:33.150 And the last lecture we have made the prosection responsive and now we are continuing on to the ad features 00:33.270 --> 00:33.720 section. 00:33.720 --> 00:35.170 OK. 00:35.580 --> 00:41.440 So as far as I know this last year was to be features in the HD. 00:41.490 --> 00:44.770 And these were called dash for that app. 00:44.790 --> 00:49.290 And this was 0 age treat let's make sure that is correct. 00:49.320 --> 01:01.320 So there is the features paragraph that is the heading 3 and that is the call dash for Dash app. 01:01.320 --> 01:06.900 All right so with that three classes we're going to need those in the lecture here. 01:08.280 --> 01:09.420 And let's get right into it. 01:09.420 --> 01:12.970 So and these same screen size. 01:12.990 --> 01:19.290 Eight hundred and twenty pixels Let's start creating and fixing these columns here because they now 01:19.290 --> 01:21.270 start to look distorted. 01:21.270 --> 01:23.320 They don't look good in my opinion there. 01:23.370 --> 01:24.820 They need some fixing. 01:24.820 --> 01:25.200 All right. 01:25.200 --> 01:29.090 So first off this paragraph here. 01:29.280 --> 01:35.280 One thing that bothers my eyes right now is the whitespace on the left and on the right of this paragraph. 01:35.280 --> 01:43.890 So if we look for the features we can see that it has a 100 and 30 pixels or padding on the right and 01:43.950 --> 01:45.120 on the left. 01:45.120 --> 01:52.340 Now we want to reduce that in the media query here by just typing plain and simple. 01:52.370 --> 02:01.620 B dash features and reducing the padding to 30 pixels on the left and on the right instead of the earlier 02:01.620 --> 02:02.170 number. 02:02.340 --> 02:09.690 And we can see now that the paragraph is better looking with no not much whitespace on the left and 02:09.690 --> 02:10.650 on right. 02:11.500 --> 02:17.050 All right into the next thing that we want to do is select each of these columns separately and we do 02:17.050 --> 02:21.480 that by DOT call dash for dash. 02:21.550 --> 02:26.550 We can see that all these three columns are getting selected here. 02:26.550 --> 02:27.410 OK. 02:28.270 --> 02:37.840 And if we remember from the earlier lessons we can see that these each one of these columns is 33 percent 02:37.870 --> 02:38.710 in with. 02:38.800 --> 02:42.590 So the total percentage would be 100 percent of the container. 02:42.610 --> 02:52.100 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 02:52.100 --> 02:56.950 three point thirty three percent and all of those are floated to the left. 02:57.020 --> 03:00.320 So what we need to basically do now it's pretty self-explanatory. 03:00.320 --> 03:07.430 We are getting these three columns like that and I want one of these columns to be stacked on top of 03:07.450 --> 03:08.050 the under one. 03:08.060 --> 03:12.750 And I want one of these columns to be with 100 percent. 03:12.770 --> 03:16.000 I want each of these columns to be 100 percent. 03:16.010 --> 03:16.380 OK. 03:16.550 --> 03:19.490 So we're basically state that here. 03:19.940 --> 03:22.230 But right now it is working. 03:22.340 --> 03:28.480 But these columns as you can see now they're taking 100 percent of the available space here. 03:28.490 --> 03:34.600 But the float option to float rule is still applied to them float left. 03:34.640 --> 03:36.380 Remember we don't want that. 03:36.380 --> 03:41.980 Right now we don't want any kind of a float because the columns look good the way they do now. 03:41.990 --> 03:44.490 So we we just do float none. 03:44.630 --> 03:50.510 We're probably going to see any difference here but that is the correct markup and off we go now where 03:50.550 --> 03:57.710 you can see that there's not enough whitespace between the image and the text here so what we can do 03:57.710 --> 04:07.490 is after each of these called dash for Dash icons columns add a margin to the bottom so aren't bottom 04:07.580 --> 04:10.900 of 50 pixels and we can see that now. 04:11.350 --> 04:13.340 And the content is split. 04:13.400 --> 04:23.830 There is enough whitespace and that is perfect. 04:23.900 --> 04:25.190 This is perfect. 04:25.240 --> 04:26.350 But at the center. 04:26.360 --> 04:31.730 Everything here is center Deros are now stacking one on top of the other one. 04:31.790 --> 04:34.370 This section here seems pretty complete to me. 04:34.370 --> 04:39.560 The lady is disappearing but we cannot do much more about that. 04:39.590 --> 04:44.720 The background is still present here with the gray color so we're just going to ignore that the lady 04:44.720 --> 04:46.660 is not visible here. 04:46.670 --> 04:49.490 Technically there's nothing we can do other than this. 04:49.490 --> 04:51.400 Everything looks fine here. 04:51.710 --> 04:57.620 Even this section at this resolution looks fine but it doesn't look fine. 04:57.620 --> 04:59.990 Is the icons here. 04:59.990 --> 05:09.170 So they're pretty much stick to the top of these next year so all we can do is select all the corporate 05:09.980 --> 05:17.850 icons so the classes will be f b t w and d r. 05:18.110 --> 05:23.180 And if we do that so select 05:25.960 --> 05:36.170 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. 05:36.220 --> 05:40.150 I think everything will be fixed the that is correct. 05:40.510 --> 05:46.370 Right now at this resolution the website looks pretty perfect to me except for an navigation bar that 05:46.390 --> 05:49.490 will be taken care of in the next lesson. 05:49.490 --> 05:54.250 So let's try to shrink down to size even more. 05:54.280 --> 05:56.990 For example let's try to use one of these presets. 05:57.040 --> 05:57.540 OK. 05:57.730 --> 05:59.320 So let's click on seven. 05:59.340 --> 06:02.130 This seven hundred and sixty eight. 06:02.240 --> 06:10.890 It will shrink down to size even smaller so the width is seven hundred sixty eight. 06:10.940 --> 06:14.490 We put signs and now we can do let's see what's wrong here. 06:14.710 --> 06:21.410 What we can actually do because now the text is getting smaller and it's line Hydes getting also small. 06:21.430 --> 06:24.150 I think this looks pretty clustered here right now. 06:24.250 --> 06:30.190 So we can do is basically do the very same thing that we did in these columns here. 06:30.460 --> 06:36.760 So that would be serving the width to all of its columns to 100 percent and setting the float to be 06:36.780 --> 06:39.590 none and then adding a bit other options. 06:40.620 --> 06:48.750 But before we do remember the viewport is seven hundred sixty eight and we need a new media query for 06:48.750 --> 06:49.570 that. 06:49.770 --> 06:53.440 Just copy this paste it and change a number. 06:55.530 --> 07:02.160 So all the cells will apply once we reach that screen size and if we select the call dash for Dash footer 07:02.640 --> 07:05.530 which I remember is exactly that class. 07:05.550 --> 07:15.690 Here again if research for call dash for Dash footer and the original Seyed we can see that it is again 07:15.690 --> 07:17.600 33 percent. 07:17.610 --> 07:26.500 So what we can do now is select the with to be 100 percent of the screen size and then flow with none 07:26.640 --> 07:30.080 because they were floated to the left again. 07:30.090 --> 07:34.490 So right now we can see that they are looking pretty nice. 07:34.530 --> 07:38.600 Now there is this space here that I don't like. 07:38.610 --> 07:47.310 And if we do inspect element and if we check on what this spacing is we can see that it's the margin 07:47.400 --> 07:52.330 top of 77 pixels none has been debugged. 07:52.330 --> 07:53.520 What is it. 07:53.590 --> 08:01.470 Now we can do margin top of the 0 pixels but notice that once we open up the inspect element D life 08:01.480 --> 08:02.830 preview shuts off. 08:02.830 --> 08:08.600 For some reason so I'm just going to need to refresh now for the changes take place and we can see that 08:08.600 --> 08:16.240 the margin on top of all of the columns here called dash for dash for columns is gone. 08:16.270 --> 08:20.390 All we can do now is try to increase the font weight to 40. 08:21.070 --> 08:24.860 So the text looks a bit more clear here. 08:25.270 --> 08:26.230 And that's pretty much it. 08:26.230 --> 08:33.190 Now I think these lower should be more separated than these other posts here so if we selected logo 08:33.190 --> 08:39.340 which class was future Dasch logo it's not life pretty. 08:39.350 --> 08:46.240 Right now remember because we have inspected the element here but if I select a future logo and then 08:46.270 --> 08:55.530 add a margin to the bottom or 30 pixels and if I refresh we can see the space will add up just a little 08:55.530 --> 08:55.660 bit. 08:55.670 --> 09:01.210 We can try even to be thirty five pixels if you think that would be necessary. 09:01.220 --> 09:02.450 So there it is. 09:02.680 --> 09:05.170 DS here still looks fine to me. 09:05.180 --> 09:08.020 Let's try to continue to trim down their size. 09:08.840 --> 09:13.290 For example well let's see. 09:13.590 --> 09:13.840 OK. 09:13.860 --> 09:23.660 Let's say at this very point here of 700 pixels so create a new one of 700 pixels and all we can do 09:23.660 --> 09:33.210 here is remember how we did set these bricks here is horizontal I'm sorry vertical bricks. 09:33.260 --> 09:38.710 They were set to weight after position after and before. 09:38.980 --> 09:47.860 So after every C R and me class which is the copyright and to me the website class we have added a content 09:47.920 --> 09:56.300 of one pixel and a margin to the left which is basically this vertical line here but if we copy this 09:56.350 --> 10:07.970 and say that was the screen read 700 in with dots or after and Dot me after instead of the content displayed 10:08.420 --> 10:10.700 do display none. 10:10.820 --> 10:17.990 And if it refresh Now if we refresh again we can see that those lines are gone and now everything looks 10:17.990 --> 10:19.030 perfect. 10:19.190 --> 10:25.730 And if we shrink down to size you add more. 10:25.860 --> 10:28.080 They all look centered right now. 10:28.380 --> 10:33.320 And if we're showing the size you or more let's take the rest of the Web site and look. 10:33.480 --> 10:39.660 Pretty amazing for me even at this small screen size. 10:39.740 --> 10:43.810 Is everything is still centered here everything is readable. 10:43.830 --> 10:53.010 Now my suggestion would be to check for the screen size is as low as three hundred and eighty pixels. 10:53.010 --> 10:58.400 If everything looking fine here then do abseiled which is ready to be deployed. 10:58.440 --> 11:01.440 It will look good and every screen size. 11:01.680 --> 11:10.320 So so far everything looks perfect but what's left to do is the navigation menu here. 11:10.320 --> 11:14.030 So let's say for example we're going to edit that in the next lesson. 11:14.040 --> 11:25.970 But let's say that once a screen reach is 1 800 I'm sorry eight hundred and forty pixels we will create 11:26.000 --> 11:33.980 a fully responsive navigation menu that will be working without any problems and it will be on click. 11:34.160 --> 11:46.450 But the cool thing is are we going to be building this with C Ss 3 and no javascript. 11:46.560 --> 11:51.090 So there's plenty of ways that you can create this right now. 11:51.420 --> 11:58.680 I'll be using a one way that you can create navigation menus using only see SAS if that's exciting. 11:58.680 --> 12:01.810 Join me in the next lesson and I'll see you there. 12:01.890 --> 12:03.220 Thank you for watching. 12:03.480 --> 12:04.510 Peace out.