1 00:00:01,050 --> 00:00:06,350 OK, so the less we want to do to our pages, make it responsive and for this, I'm going to it up here 2 00:00:06,360 --> 00:00:07,370 in the right corner. 3 00:00:08,100 --> 00:00:19,560 Our tag right here for four devices and we just change it down to the iPad, iPhone, iPad. 4 00:00:19,590 --> 00:00:20,080 There we go. 5 00:00:20,760 --> 00:00:23,700 This will have a maximum of seven hundred sixty eight. 6 00:00:25,850 --> 00:00:35,720 Now, when our website reaches to actually make it smaller, we have something smaller. 7 00:00:37,480 --> 00:00:39,550 So if there's a small 300. 8 00:00:40,810 --> 00:00:48,860 I can remain here, so as soon as we are under, let's say, 600 pixels, this is most phones. 9 00:00:48,880 --> 00:00:49,210 Yeah. 10 00:00:49,210 --> 00:00:51,040 And really small tags. 11 00:00:51,460 --> 00:00:58,480 You see our well, our website just goes out of the stratosphere in order to fix this. 12 00:00:58,680 --> 00:01:01,600 We are going to create now a media query. 13 00:01:02,380 --> 00:01:06,520 So we're going to go down here type of comment of responsive. 14 00:01:10,000 --> 00:01:13,050 And we're going to now type in at media. 15 00:01:13,780 --> 00:01:22,390 I'm going to target when the screen is has a max width of some max width of 600 pixels. 16 00:01:24,930 --> 00:01:35,050 So when it's under this next with the header will be displayed as grid and you can always see I'm changing 17 00:01:35,120 --> 00:01:36,120 from flex to grid. 18 00:01:36,760 --> 00:01:40,350 I'm going to use a grid template column of repeat. 19 00:01:41,240 --> 00:01:42,740 Two times one F.R.. 20 00:01:45,640 --> 00:01:48,990 And we're going to justify the items now recentre. 21 00:01:49,960 --> 00:01:52,570 So let's see what this does up here. 22 00:01:57,400 --> 00:01:59,590 And why isn't this taking effect? 23 00:02:03,490 --> 00:02:04,570 Did I not hit save? 24 00:02:11,160 --> 00:02:12,840 Hmm, strange. 25 00:02:18,710 --> 00:02:21,320 Let's take a look in our finished project. 26 00:02:22,130 --> 00:02:23,130 Did I miss something? 27 00:02:23,180 --> 00:02:25,160 This actually look like this? 28 00:02:26,430 --> 00:02:27,980 So what am I missing here? 29 00:02:33,130 --> 00:02:36,070 He media with 600 pixels. 30 00:02:37,070 --> 00:02:41,900 Had the displayed great oh, not Collum ro. 31 00:02:46,090 --> 00:02:52,090 OK, I messed up, so finish project and here we go. 32 00:02:52,330 --> 00:02:57,940 Yes, we are changing it to have two rows or actually get two rows. 33 00:03:00,110 --> 00:03:05,900 With each having its size still remains, but now it's on to Rose. 34 00:03:06,510 --> 00:03:09,230 Okay, so it's having the same functionality. 35 00:03:09,860 --> 00:03:13,400 Now let's take care of our main section and down we're done. 36 00:03:14,480 --> 00:03:17,680 And for this, we just came to see us down here. 37 00:03:17,690 --> 00:03:18,560 So section. 38 00:03:22,270 --> 00:03:31,640 And they're so s. and we're going to display it as flex instead of grit, I'm going to change the flex 39 00:03:31,640 --> 00:03:32,360 direction. 40 00:03:36,090 --> 00:03:41,350 And the column and the section, all we need to do and we go to our website is now perfect. 41 00:03:43,320 --> 00:03:48,260 I guess I hope you enjoyed this little project, as you can see, their differences when those flags 42 00:03:48,260 --> 00:03:50,980 went is great, in my humble opinion. 43 00:03:51,200 --> 00:03:58,400 It really depends on the situation, but mostly for her navigation, I would always use flags for sections 44 00:03:58,400 --> 00:04:01,400 or larger sections where images are included. 45 00:04:01,400 --> 00:04:09,170 And so far for cards, I would use also flags or in some instances grid and then for displaying, well, 46 00:04:09,170 --> 00:04:14,080 main parts of the page I would use grid or for footer. 47 00:04:14,450 --> 00:04:16,390 Well, for futer sections. 48 00:04:16,880 --> 00:04:20,300 It depends on how large they are. 49 00:04:21,080 --> 00:04:28,370 If we have only two items that I would use, maybe flags, but if I had more than two items, I would 50 00:04:28,370 --> 00:04:29,000 use grid. 51 00:04:29,270 --> 00:04:34,010 So more than two bundles, let's just say, OK, so that's pretty much it for this part. 52 00:04:34,010 --> 00:04:36,290 I hope to enjoy it and see next time, but.