1 00:00:01,100 --> 00:00:03,050 Hello, everyone, and welcome back. 2 00:00:03,890 --> 00:00:09,380 In today's video, we will learn how to create a responsive website using media queries. 3 00:00:10,520 --> 00:00:11,840 Let's say we have this Web page. 4 00:00:11,900 --> 00:00:15,790 We've got a dot, but an image and some text. 5 00:00:16,690 --> 00:00:19,520 And we have to convert this Web site into this. 6 00:00:20,390 --> 00:00:24,320 So it does a lift section on an aside section. 7 00:00:26,830 --> 00:00:30,510 And when you open this on a mobile screen, this is how it looks. 8 00:00:30,940 --> 00:00:38,010 The door bug changes or section fills the entire screen and the side fills the entire screen. 9 00:00:39,110 --> 00:00:40,300 So let's get started. 10 00:00:42,740 --> 00:00:44,020 Let's bring a bar, Ed. 11 00:00:48,360 --> 00:00:51,130 All right, so first we need to add this aside. 12 00:00:52,970 --> 00:00:53,980 So let's do that. 13 00:00:56,480 --> 00:00:57,890 Let's create a div. 14 00:00:58,430 --> 00:00:59,080 Inside the door. 15 00:00:59,150 --> 00:01:00,890 We need these images. 16 00:01:00,950 --> 00:01:02,090 So let's create that. 17 00:01:03,870 --> 00:01:08,720 So image, it requires an asare see an old. 18 00:01:10,380 --> 00:01:12,150 So this is the source. 19 00:01:14,740 --> 00:01:15,500 And let's see. 20 00:01:17,700 --> 00:01:19,420 This is all text. 21 00:01:21,150 --> 00:01:25,140 Similarly, it requires a label as well to let's adopt. 22 00:01:26,880 --> 00:01:27,960 Let's make a copy of this. 23 00:01:27,990 --> 00:01:30,090 We need three, two, one, two, three. 24 00:01:30,810 --> 00:01:31,700 Let's say it. 25 00:01:34,170 --> 00:01:35,380 Copy the second one. 26 00:01:40,100 --> 00:01:40,480 Dated. 27 00:01:45,860 --> 00:01:47,000 Let's copy this label. 28 00:01:51,330 --> 00:01:52,130 Let's face it. 29 00:01:52,210 --> 00:01:52,730 Hugh. 30 00:01:54,500 --> 00:01:56,390 Similarly for the third one. 31 00:02:01,080 --> 00:02:01,960 Let's face it here. 32 00:02:04,220 --> 00:02:05,570 On the last label. 33 00:02:08,330 --> 00:02:10,280 Look, space, this one over here. 34 00:02:11,090 --> 00:02:11,720 Let's save it. 35 00:02:12,620 --> 00:02:13,880 Coming back to a browser. 36 00:02:14,310 --> 00:02:17,780 And as you can see, we've got these images on labels. 37 00:02:19,120 --> 00:02:24,070 So now what we want to do is we want to move section on these images next to each other. 38 00:02:24,610 --> 00:02:25,370 So let's try that. 39 00:02:28,560 --> 00:02:31,650 So to move something next to each other, we can use in landlock. 40 00:02:33,180 --> 00:02:37,220 So section, let's say, a display in line block. 41 00:02:39,860 --> 00:02:43,840 So if you look sure, the world looks like it's 70. 42 00:02:44,980 --> 00:02:45,770 30%. 43 00:02:47,550 --> 00:02:52,130 So let's say with 70 percent. 44 00:02:54,260 --> 00:02:55,710 Let's give it a margin, right? 45 00:02:55,820 --> 00:02:57,560 Say 16 pixels. 46 00:02:59,270 --> 00:03:02,310 It's a little more, let's say, 24 pixels. 47 00:03:04,220 --> 00:03:05,100 Let's save it. 48 00:03:05,380 --> 00:03:10,600 Similarly for a side, let's add some properties, so display in Lane Block. 49 00:03:12,070 --> 00:03:14,350 Would, let's say 25 percent. 50 00:03:14,590 --> 00:03:15,280 Let's say that. 51 00:03:16,690 --> 00:03:21,470 Coming back here on, as you can see, all these elements are next to each other. 52 00:03:21,490 --> 00:03:23,980 Just that the styling is a bit off. 53 00:03:24,520 --> 00:03:26,700 So first, let's reduce this image size. 54 00:03:26,950 --> 00:03:33,130 Let's add some classes to these divisions, let's say place, rather. 55 00:03:33,670 --> 00:03:35,020 Let's copy this class. 56 00:03:36,340 --> 00:03:36,800 Wasted. 57 00:03:36,910 --> 00:03:39,160 Q and Q. 58 00:03:43,030 --> 00:03:43,670 It saved. 59 00:03:45,810 --> 00:03:47,140 Let's select this division. 60 00:03:49,370 --> 00:03:50,040 Places, rapper. 61 00:03:50,120 --> 00:03:51,880 Let's give it a hundred percent with. 62 00:03:52,480 --> 00:03:55,440 So one hundred percent with this would be the total with. 63 00:03:55,460 --> 00:04:01,100 Available in the aside element, which is 25 percent of the entire world. 64 00:04:01,460 --> 00:04:03,250 Similarly, let's say that. 65 00:04:03,360 --> 00:04:05,240 So let's bring this up shoe. 66 00:04:07,080 --> 00:04:12,900 All right, now let's select these images, so please rapper inside the rapper, we have the image element. 67 00:04:14,850 --> 00:04:16,560 Let's give it 100 percent good. 68 00:04:16,830 --> 00:04:20,490 So basically we are giving the total with available inside the def. 69 00:04:21,300 --> 00:04:21,980 Let's save it. 70 00:04:22,500 --> 00:04:24,960 And as you can see, the images have gotten smaller. 71 00:04:25,710 --> 00:04:26,080 All right. 72 00:04:26,100 --> 00:04:27,250 So coming back to you. 73 00:04:27,310 --> 00:04:32,100 And as you can see, these elements aren't aligned at the top. 74 00:04:32,640 --> 00:04:38,730 So when you're looking with display in block, you get access to another property vertical line. 75 00:04:39,960 --> 00:04:43,110 So let's try that and we can give it a value stock. 76 00:04:43,620 --> 00:04:44,250 Let's say that. 77 00:04:46,790 --> 00:04:49,980 As you can see, a side element is not on the top. 78 00:04:50,450 --> 00:04:52,670 So now we need to give it about Goncalo, right? 79 00:04:52,820 --> 00:04:55,210 So let's give it this discard like she. 80 00:04:56,330 --> 00:04:57,800 So coming back, Hugh. 81 00:04:58,910 --> 00:05:01,100 First, let's order for a side. 82 00:05:02,000 --> 00:05:05,550 So by Goncalo Color White the table. 83 00:05:06,500 --> 00:05:09,950 Let's give it somebody say 16 pixels. 84 00:05:11,660 --> 00:05:13,220 Let's give it a box sizing. 85 00:05:13,490 --> 00:05:16,970 Say you bought a box because I don't want the weight to increase. 86 00:05:17,630 --> 00:05:19,220 Let's give it a border radius. 87 00:05:21,360 --> 00:05:23,130 Let's say eight pixels. 88 00:05:24,090 --> 00:05:27,450 Let's go to some shadow so we can use box shadow. 89 00:05:28,170 --> 00:05:38,460 So zero two pixels for the vertical shadow and five pixels spread or blurred and then harsh, let's 90 00:05:38,460 --> 00:05:39,480 say triple E. 91 00:05:40,180 --> 00:05:41,520 Let's say that again. 92 00:05:41,620 --> 00:05:43,050 That looks good. 93 00:05:44,180 --> 00:05:49,160 Also, after all these delay items, they've got this separate to. 94 00:05:50,360 --> 00:05:55,230 So what we can do is we can use a border bottom for the place report. 95 00:05:56,810 --> 00:06:03,400 So let's say border bottom one, pixels solid on triple A, the table. 96 00:06:04,950 --> 00:06:06,130 OK, so we've got our water. 97 00:06:06,210 --> 00:06:09,690 It's just that it's right next to that image so it's not visible. 98 00:06:10,170 --> 00:06:11,810 So let's give a margin bottom. 99 00:06:12,090 --> 00:06:15,000 So if I give my bottom, say, 16 pixels. 100 00:06:15,820 --> 00:06:18,780 So it creates this space and our border is visible. 101 00:06:20,910 --> 00:06:25,920 Also, if you notice the borders available for the last item as well, and we don't wonder. 102 00:06:26,970 --> 00:06:28,420 So let's select the last item. 103 00:06:28,500 --> 00:06:31,680 So please, wrapper list of type. 104 00:06:33,170 --> 00:06:35,450 Let's say border bottom zero. 105 00:06:35,840 --> 00:06:40,040 So we are just hiding the border and let's remove this margin bottom as well. 106 00:06:40,370 --> 00:06:41,000 Let's save it. 107 00:06:41,930 --> 00:06:43,090 And as you can see. 108 00:06:44,690 --> 00:06:46,770 These properties are gone for the last item. 109 00:06:47,590 --> 00:06:52,870 Okay, so it looks pretty much seem just that the Fonzie's looks a bit small. 110 00:06:53,000 --> 00:06:54,080 So let's increase that. 111 00:06:54,560 --> 00:06:56,660 So for the labels we have used paragraph. 112 00:06:57,020 --> 00:07:00,140 So lace wrapper paragraph. 113 00:07:00,170 --> 00:07:02,840 Let's say font size 18 pixels. 114 00:07:04,320 --> 00:07:06,390 Okay, that looks much better. 115 00:07:06,780 --> 00:07:10,740 All right, so moving on to the section, but let's give it a background color. 116 00:07:12,630 --> 00:07:12,930 Let's see. 117 00:07:13,000 --> 00:07:14,380 Background color white. 118 00:07:15,190 --> 00:07:17,230 Let's give it a border radius. 119 00:07:18,320 --> 00:07:20,260 Eight big cells that save it. 120 00:07:20,830 --> 00:07:22,480 Let's give it a box shadow. 121 00:07:22,720 --> 00:07:24,580 So again, let's give it a same value. 122 00:07:25,370 --> 00:07:29,170 So zero two pixels, five pixels blur and hash trouble. 123 00:07:30,250 --> 00:07:30,850 Let's save it. 124 00:07:31,540 --> 00:07:31,810 All right. 125 00:07:31,820 --> 00:07:33,430 So it looks pretty much the same. 126 00:07:34,110 --> 00:07:36,410 Now, let's make it mobile, responsive. 127 00:07:36,820 --> 00:07:39,610 So let's just create a web, Anderson. 128 00:07:39,700 --> 00:07:40,450 Another tab. 129 00:07:42,190 --> 00:07:42,880 Inspect. 130 00:07:45,120 --> 00:07:46,920 Changed to the movie Illusion. 131 00:07:47,610 --> 00:07:50,910 So, as you can see, our section is not taking the entire world. 132 00:07:50,970 --> 00:07:53,810 So let's give it the entire world. 133 00:07:55,040 --> 00:07:56,180 Let's bring it to you. 134 00:07:57,160 --> 00:07:57,340 OK. 135 00:07:57,470 --> 00:08:00,290 So do define special styles for mobile screens. 136 00:08:00,320 --> 00:08:02,210 We could use media queries. 137 00:08:03,080 --> 00:08:05,030 So are the rate media. 138 00:08:06,940 --> 00:08:10,020 Screen on, let's give it up. 139 00:08:10,080 --> 00:08:10,890 Marks with. 140 00:08:14,130 --> 00:08:16,020 Let's say 768 pixels. 141 00:08:18,870 --> 00:08:22,050 All right, so now what we want is to give full weight to section. 142 00:08:22,980 --> 00:08:25,980 So right now it's a display in landlock. 143 00:08:26,430 --> 00:08:27,280 So let's change it. 144 00:08:27,300 --> 00:08:28,200 Do block. 145 00:08:29,430 --> 00:08:31,450 And let's increase the red see? 146 00:08:31,560 --> 00:08:32,480 Hundred percent. 147 00:08:33,040 --> 00:08:33,650 Let's save it. 148 00:08:34,250 --> 00:08:37,040 It looks better, but it has a lot of padding on left and right. 149 00:08:37,070 --> 00:08:37,840 So let's see. 150 00:08:37,850 --> 00:08:38,540 Was duct. 151 00:08:40,350 --> 00:08:47,130 So over here in Maine, we've given putting off two percent and a boost in stock bottom to left, right 152 00:08:47,220 --> 00:08:47,580 eight. 153 00:08:48,660 --> 00:08:52,440 So let's change it to two percent on all the sites from the screen. 154 00:08:53,720 --> 00:08:57,980 So we aren't updating the margin and excellence, so we could simply remove these properties. 155 00:08:59,010 --> 00:09:01,090 On a date budding to Dupas and. 156 00:09:03,220 --> 00:09:03,480 OK. 157 00:09:03,580 --> 00:09:04,690 It looks better. 158 00:09:05,350 --> 00:09:09,720 Also, the font size is a bit big, so let's produce docked. 159 00:09:10,330 --> 00:09:11,500 So going back, Hugh. 160 00:09:16,290 --> 00:09:22,200 Now for the fun size for Headingley views this property and further paragraphs to use this property. 161 00:09:22,760 --> 00:09:24,540 So let's copy it and bring it down here. 162 00:09:26,640 --> 00:09:27,470 That's based at. 163 00:09:28,560 --> 00:09:35,640 So let's say font size 24 pixels for the heading on font size 18 pixels for the paragraph. 164 00:09:36,390 --> 00:09:39,430 We aren't changing any other property, so let's just remove these. 165 00:09:40,050 --> 00:09:42,990 Let's see what it looks pretty much the same. 166 00:09:43,710 --> 00:09:43,990 All right. 167 00:09:44,100 --> 00:09:47,320 So the section board is done moving onto the side. 168 00:09:48,080 --> 00:09:48,350 All right. 169 00:09:48,390 --> 00:09:50,640 So let's select the site element. 170 00:09:52,140 --> 00:09:53,700 Let's say display block. 171 00:09:55,430 --> 00:09:57,910 Let's give it a read off hundred booton. 172 00:09:58,190 --> 00:09:59,060 Let's save it. 173 00:10:00,360 --> 00:10:01,260 Coming down here. 174 00:10:02,420 --> 00:10:03,770 And as you can see. 175 00:10:06,020 --> 00:10:08,110 Block looks pretty much the same. 176 00:10:10,330 --> 00:10:10,660 All right. 177 00:10:10,700 --> 00:10:13,580 Now, moving on to the last part, which is the top bar. 178 00:10:13,970 --> 00:10:18,200 So in the top of the logo and menu item, this center line. 179 00:10:18,290 --> 00:10:19,260 So let's do that. 180 00:10:22,310 --> 00:10:27,850 So the idea for your buddies, Dornberg, so harsh and Dornberg. 181 00:10:28,970 --> 00:10:35,790 Let's say text align center, because these are all spun or because these are all in line item. 182 00:10:35,840 --> 00:10:39,080 So we could simply use sticks lines into coming who? 183 00:10:40,720 --> 00:10:44,120 OK, so the menu items are Sanderlin, but not delusional. 184 00:10:44,770 --> 00:10:45,460 So let's check. 185 00:10:49,860 --> 00:10:51,430 So Lugo has a margin, right? 186 00:10:51,910 --> 00:10:52,860 So let's remove that. 187 00:10:56,400 --> 00:10:57,760 So let's make logo. 188 00:10:57,950 --> 00:10:58,800 Let's change the. 189 00:11:00,420 --> 00:11:03,170 Marginalized while loop say zero exults. 190 00:11:03,800 --> 00:11:04,430 That's David. 191 00:11:05,990 --> 00:11:08,180 Also, we want the logo to be in one line. 192 00:11:08,960 --> 00:11:12,050 So let's change the display value, let's say display block. 193 00:11:12,580 --> 00:11:13,130 That's David. 194 00:11:14,390 --> 00:11:14,640 All right. 195 00:11:14,670 --> 00:11:16,000 That looks much better. 196 00:11:16,540 --> 00:11:18,550 Let's add some sales for the menu items. 197 00:11:18,610 --> 00:11:20,180 So menu item. 198 00:11:20,890 --> 00:11:22,570 Let's increase the font size first. 199 00:11:22,780 --> 00:11:25,300 So let's say font size 18 pixels. 200 00:11:26,480 --> 00:11:30,770 Let's give it a margin talk, say, dwil pixels. 201 00:11:31,340 --> 00:11:35,950 Again, it's not working because these menu items are in line elements. 202 00:11:36,980 --> 00:11:39,500 Top bottom properties doing well in line elements. 203 00:11:40,190 --> 00:11:43,400 So simply a change to display in line block. 204 00:11:46,630 --> 00:11:47,150 Let's it. 205 00:11:48,180 --> 00:11:50,350 Also, if I inspect this element. 206 00:11:53,050 --> 00:11:55,410 There is a margin rate for all these elements. 207 00:11:55,770 --> 00:11:58,740 So that's why these menu items aren't completely in the same dough. 208 00:11:58,800 --> 00:12:02,010 So what we need to do is remove margin from the last item. 209 00:12:03,310 --> 00:12:05,650 So coming back culotte, select the last item. 210 00:12:07,570 --> 00:12:11,710 So menu item, last off type. 211 00:12:14,090 --> 00:12:15,920 Let's see, margin right on zero. 212 00:12:16,250 --> 00:12:16,940 Let's save it. 213 00:12:18,660 --> 00:12:21,540 And as you can see, it looks much better. 214 00:12:24,900 --> 00:12:26,460 And if we open the distribution. 215 00:12:28,670 --> 00:12:30,580 So even the desktop was it looks pretty good. 216 00:12:31,400 --> 00:12:35,840 So that's how we use media queries to create responsive websites. 217 00:12:36,950 --> 00:12:39,860 So if you notice, Medicalise isn't something magical. 218 00:12:39,910 --> 00:12:44,160 So the only thing, Medick, what it does is it helps you create breakpoints. 219 00:12:44,330 --> 00:12:46,070 And after that, it's all styling. 220 00:12:46,310 --> 00:12:50,660 It's all up to you how you want to design Lautz on different different screens. 221 00:12:51,530 --> 00:12:52,670 That's all for today, guys. 222 00:12:52,790 --> 00:12:54,770 If there is something that you did not understand. 223 00:12:55,370 --> 00:12:57,620 Feel free to drop a comment and we will discuss it. 224 00:12:58,310 --> 00:12:59,420 See you in the next video. 225 00:12:59,510 --> 00:12:59,840 Bye. 226 00:13:00,000 --> 00:13:00,690 And take care.