1 00:00:00,240 --> 00:00:02,880 We arrived at our responsive site. 2 00:00:03,060 --> 00:00:10,110 We arrived at our responsive part of the website, so we're going to use a few media queries and then 3 00:00:10,260 --> 00:00:15,130 the site should be responsive in multiple instances, for example, tablet or phone. 4 00:00:15,600 --> 00:00:16,740 So let's get started. 5 00:00:17,250 --> 00:00:23,370 Now, we don't need to write any more e-mail, but what we do need to do is create media queries. 6 00:00:24,730 --> 00:00:27,540 So I'm going to create two to eight media. 7 00:00:28,020 --> 00:00:33,690 And the first one is going to be when the max width is. 8 00:00:37,010 --> 00:00:43,940 Smaller than 900 pixels, then something should happen and another one. 9 00:00:45,210 --> 00:00:54,330 When the mix with I was going to copy this, it's it's more than 400, I love it. 10 00:00:54,540 --> 00:00:56,770 What I'm saying something and typing something totally different. 11 00:00:56,790 --> 00:01:00,940 I just said 400 and 500 accents. 12 00:01:00,990 --> 00:01:03,030 So let's go into the 900. 13 00:01:03,630 --> 00:01:09,280 And now what I'm going to do, I'm going to take my side and pop it up here in the right side. 14 00:01:09,960 --> 00:01:13,130 So let's take our page and put it in here. 15 00:01:14,770 --> 00:01:16,060 And let's make it smaller. 16 00:01:19,610 --> 00:01:24,150 OK, so I think we are under 900 now, this is already taking effect. 17 00:01:24,170 --> 00:01:25,040 This is perfect. 18 00:01:27,670 --> 00:01:29,620 And now we need to do a couple of things. 19 00:01:33,100 --> 00:01:34,840 For example, in our Heather. 20 00:01:37,810 --> 00:01:38,830 I think that Heather is 21 00:01:41,650 --> 00:01:48,820 going to take the H1 and decrease its font size, so instead of having that huge font size going to 22 00:01:48,820 --> 00:01:53,060 go with six ram again, this is just depends on your preference. 23 00:01:53,090 --> 00:01:57,100 Okay, so this means we're under 900 and already this shrinks down. 24 00:01:59,290 --> 00:02:08,470 Now, I'm going to also take all of the tools and change the font size perform, so this means all of 25 00:02:08,470 --> 00:02:09,580 our titles right here. 26 00:02:13,280 --> 00:02:20,930 Now for the navigation, let's go up here again, Knap, I also want to change this font size. 27 00:02:22,520 --> 00:02:29,320 So when we are on the 900 pixels, was that means that we in a tablet format must change? 28 00:02:29,330 --> 00:02:33,620 Well, what the hell did I just say to the one size? 29 00:02:37,180 --> 00:02:41,260 At one point five Vibram, the killer said save and there were no options. 30 00:02:41,280 --> 00:02:42,450 I just ran down a bit. 31 00:02:46,570 --> 00:02:53,350 Now, the only thing I want to change in this specific incident is the about section, want to change 32 00:02:53,350 --> 00:02:54,700 the spot right there. 33 00:02:56,490 --> 00:02:58,650 So let's talk about idee. 34 00:03:00,230 --> 00:03:03,410 And as to a CLECs direction. 35 00:03:07,270 --> 00:03:09,970 In the column, that's Hitzig. 36 00:03:13,560 --> 00:03:18,340 And this didn't take effect because, oh, yeah, I need to tell you the container. 37 00:03:18,420 --> 00:03:22,470 Oh, well, so it's actually in the about container. 38 00:03:24,200 --> 00:03:27,980 And there we go now it has disappeared, but we're going to take care of this. 39 00:03:29,360 --> 00:03:35,940 You just need to target that image again, so about and within this about image. 40 00:03:38,600 --> 00:03:41,380 I'm going to change its mean hide. 41 00:03:42,220 --> 00:03:44,410 To five hundred fifty pixels. 42 00:03:45,940 --> 00:03:47,630 And so we do this, there will. 43 00:03:49,920 --> 00:03:58,680 Not that I need to do is stall this and this is about description, so let's talk about the idea again 44 00:03:58,680 --> 00:04:00,630 within this about description. 45 00:04:02,620 --> 00:04:05,790 Analysts change the margin from the top to to rim. 46 00:04:07,730 --> 00:04:09,770 There's displayed as flags. 47 00:04:12,840 --> 00:04:19,920 And change the flex direction to a column now and also align everything. 48 00:04:21,590 --> 00:04:25,940 Into the center of the page hit Save, and there we go. 49 00:04:29,700 --> 00:04:35,750 Now, this is it for it, that's for a tabloid mode, so let's see, how are we looking now? 50 00:04:36,600 --> 00:04:37,610 That's pretty good, actually. 51 00:04:38,550 --> 00:04:40,470 Now, let's go for phone mode. 52 00:04:44,240 --> 00:04:45,740 And there's actually not much to it. 53 00:04:45,770 --> 00:04:49,100 I'm just going to decrease as I actually am going to shrink this down. 54 00:04:49,130 --> 00:04:52,400 First of all, this would be kind of a full mode. 55 00:04:53,720 --> 00:04:55,260 So let's do a couple of things. 56 00:04:55,280 --> 00:05:01,910 For instance, we're going to take the H tools and Sherrington down to 2.5 RAM. 57 00:05:04,950 --> 00:05:05,760 So it'll be fun. 58 00:05:05,790 --> 00:05:10,050 Sighs What are you doing, Norbert Key? 59 00:05:11,100 --> 00:05:12,170 2.5 ram. 60 00:05:18,630 --> 00:05:21,330 To make them note 2.5, yeah. 61 00:05:22,190 --> 00:05:24,100 OK, that's good. 62 00:05:25,770 --> 00:05:30,210 Most change on navigation also because this is way too large up here. 63 00:05:31,540 --> 00:05:40,390 So harsh, nav, and as give it the first of a height of 15 viewport heights, OK? 64 00:05:42,670 --> 00:05:46,030 Now, I'm going to change the direction into column. 65 00:05:49,380 --> 00:05:57,210 And now let's go to our passion, if you will, so honored, at least we actually actual never items, 66 00:05:57,280 --> 00:06:01,440 Lou, used to justify the content with space between. 67 00:06:03,670 --> 00:06:09,190 And going to align the items to the center that said save. 68 00:06:14,070 --> 00:06:26,730 And aren't we on the 400 other go now on the 400 and also want to change our H1 there, so let's take 69 00:06:26,730 --> 00:06:32,270 this carpet in here and change it to form. 70 00:06:33,600 --> 00:06:34,320 Is it safe? 71 00:06:35,800 --> 00:06:36,540 That's much better. 72 00:06:39,490 --> 00:06:43,900 And the very last thing that we need to do is go to about section. 73 00:06:46,270 --> 00:06:48,010 And changed about image. 74 00:06:50,720 --> 00:06:52,160 To have a Menwith. 75 00:06:54,760 --> 00:06:56,350 All 350 pixels. 76 00:06:58,740 --> 00:07:01,800 OK, let's save and now we can navigate with full page. 77 00:07:02,870 --> 00:07:03,950 And hey, there we go. 78 00:07:05,790 --> 00:07:07,650 There's your responsive page right there. 79 00:07:08,340 --> 00:07:10,020 Okay, so hope you enjoyed this project. 80 00:07:10,050 --> 00:07:10,770 I know I did. 81 00:07:11,170 --> 00:07:14,880 And yes, see you in the next one or so in the future. 82 00:07:15,210 --> 00:07:16,110 But I take care.