Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,699 --> 00:00:04,670 Hi there. Over the last lectures, 2 2 00:00:04,670 --> 00:00:07,020 together we build a beautiful website 3 3 00:00:07,020 --> 00:00:09,987 that you can be really proud of. 4 4 00:00:09,987 --> 00:00:13,181 It looks really great on a computer so far, 5 5 00:00:13,181 --> 00:00:15,562 but we also want it to look great 6 6 00:00:15,562 --> 00:00:19,702 on other devices with smaller screens, right? 7 7 00:00:19,702 --> 00:00:21,226 And as you know, this is where 8 8 00:00:21,226 --> 00:00:24,159 responsive web design comes in. 9 9 00:00:24,159 --> 00:00:28,877 So far, we built our entire layout with a fluid grid. 10 10 00:00:28,877 --> 00:00:31,755 And now it's time to take care of media queries 11 11 00:00:31,755 --> 00:00:34,562 to make our website truly responsive, 12 12 00:00:34,562 --> 00:00:37,562 to make it shine across all devices. 13 13 00:00:39,342 --> 00:00:41,170 So this is how our website will look 14 14 00:00:41,170 --> 00:00:44,082 on four different screen sizes. 15 15 00:00:44,082 --> 00:00:46,992 Basically, as the screen gets smaller, 16 16 00:00:46,992 --> 00:00:50,888 our content also gets smaller, and we have less white space, 17 17 00:00:50,888 --> 00:00:55,055 so that the website can be seen on a mobile phone or tablet. 18 18 00:00:56,874 --> 00:01:00,848 So, media queries are what will enable our website 19 19 00:01:00,848 --> 00:01:04,227 to call different CSS style declarations 20 20 00:01:04,227 --> 00:01:06,760 based on the current browser width 21 21 00:01:06,760 --> 00:01:11,528 or the width of a mobile device that displays our site. 22 22 00:01:11,528 --> 00:01:16,147 These media queries will trigger at different breakpoints. 23 23 00:01:16,147 --> 00:01:18,862 And breakpoints are screen width 24 24 00:01:18,862 --> 00:01:22,417 at which we want our website to change the way it looks 25 25 00:01:22,417 --> 00:01:25,660 in order to look good on all devices. 26 26 00:01:25,660 --> 00:01:30,129 The standard breakpoints are for tablet and for mobile. 27 27 00:01:30,129 --> 00:01:34,957 On this diagram here, you can see some possible breakpoints. 28 28 00:01:34,957 --> 00:01:37,268 And we will define our media queries 29 29 00:01:37,268 --> 00:01:40,153 for exactly those breakpoints. 30 30 00:01:40,153 --> 00:01:42,579 When you're just starting out, the easiest way 31 31 00:01:42,579 --> 00:01:45,980 to define breakpoints is to use device widths 32 32 00:01:45,980 --> 00:01:50,037 from popular devices, like the iPhone or the iPad. 33 33 00:01:50,037 --> 00:01:52,342 That is what we're going to do. 34 34 00:01:52,342 --> 00:01:55,138 However, once you got more experience, 35 35 00:01:55,138 --> 00:01:57,857 you should set your breakpoints simply at points 36 36 00:01:57,857 --> 00:02:02,850 where your design starts to look kind of terrible. 37 37 00:02:02,850 --> 00:02:06,341 So, now let's see how we can define those breakpoints 38 38 00:02:06,341 --> 00:02:08,508 with media queries in CSS. 39 39 00:02:11,299 --> 00:02:14,695 So the first thing I'm going to do is to create a new file 40 40 00:02:14,695 --> 00:02:17,612 where I will put the media queries. 41 41 00:02:18,866 --> 00:02:21,116 So hit new file and save it 42 42 00:02:24,168 --> 00:02:26,332 to our CSS folder. 43 43 00:02:26,332 --> 00:02:29,415 And I'm going to name it queries.css. 44 44 00:02:32,571 --> 00:02:35,948 Alright, so this is our CSS file. 45 45 00:02:35,948 --> 00:02:40,470 And now, let's start to put our media queries here. 46 46 00:02:40,470 --> 00:02:43,637 So, I will start with the smallest one 47 47 00:02:45,161 --> 00:02:46,820 and this is how we do it. 48 48 00:02:46,820 --> 00:02:49,320 So, media and then we say only 49 49 00:02:52,045 --> 00:02:52,878 screen 50 50 00:02:54,554 --> 00:02:57,221 and now we define our max-width. 51 51 00:03:00,375 --> 00:03:03,458 And we say this should be 480 pixels. 52 52 00:03:05,428 --> 00:03:09,595 And then all our styles go inside of this declaration block. 53 53 00:03:11,857 --> 00:03:15,391 So what this means is that these rules, 54 54 00:03:15,391 --> 00:03:17,407 which will come in here, will apply 55 55 00:03:17,407 --> 00:03:20,005 when the width of the device or the browser 56 56 00:03:20,005 --> 00:03:23,304 is less or equal than 480 pixels. 57 57 00:03:23,304 --> 00:03:27,086 And this is the width of the old iPhones, 58 58 00:03:27,086 --> 00:03:30,336 like the iPhone 5, iPhone 4, and so on. 59 59 00:03:31,260 --> 00:03:34,010 So I am actually going to put a comment in here 60 60 00:03:34,010 --> 00:03:37,876 to say that so that we can come here later 61 61 00:03:37,876 --> 00:03:40,459 and don't get lost in our code. 62 62 00:03:41,863 --> 00:03:44,113 So this is for small phones 63 63 00:03:47,041 --> 00:03:49,041 from zero to 480 pixels. 64 64 00:03:53,510 --> 00:03:54,427 Okay, next. 65 65 00:03:56,723 --> 00:03:59,508 We will make a media query 66 66 00:03:59,508 --> 00:04:01,508 for larger small phones. 67 67 00:04:04,305 --> 00:04:08,183 And let me just copy this, because kind of lazy here. 68 68 00:04:08,183 --> 00:04:11,548 Don't wanna write it all again. 69 69 00:04:11,548 --> 00:04:14,215 Okay and this will be 767 pixels 70 70 00:04:17,687 --> 00:04:21,847 and this, again, means that rules that will be 71 71 00:04:21,847 --> 00:04:26,470 in this block here will apply for all the browser widths 72 72 00:04:26,470 --> 00:04:29,053 which are less or equal to 767. 73 73 00:04:31,302 --> 00:04:35,469 And this value is because of the width of the iPad is 768. 74 74 00:04:39,430 --> 00:04:44,155 So we want this media query to target all the phones 75 75 00:04:44,155 --> 00:04:46,947 which are smaller than the iPad, 76 76 00:04:46,947 --> 00:04:50,801 and then the next media query will target the iPad 77 77 00:04:50,801 --> 00:04:53,584 and of course other tablets as well. 78 78 00:04:53,584 --> 00:04:55,191 I am just going with the iPad and iPhone, 79 79 00:04:55,191 --> 00:04:59,358 because, you know, those are the most popular devices. 80 80 00:05:01,225 --> 00:05:02,808 So I will say small 81 81 00:05:05,541 --> 00:05:06,374 phones to 82 82 00:05:08,791 --> 00:05:09,958 small tablets, 83 83 00:05:12,038 --> 00:05:13,854 cause you know there are maybe some tablets 84 84 00:05:13,854 --> 00:05:18,271 with 700 pixels width or something like that. 85 85 00:05:18,271 --> 00:05:20,251 So we target them as well here. 86 86 00:05:20,251 --> 00:05:22,084 So this means from 481 87 87 00:05:24,987 --> 00:05:26,737 to 767 pixels, right? 88 88 00:05:35,660 --> 00:05:37,077 So and now I will 89 89 00:05:39,380 --> 00:05:41,297 put another query here. 90 90 00:05:46,249 --> 00:05:47,499 And this one is 91 91 00:05:50,507 --> 00:05:51,340 1023. 92 92 00:05:52,838 --> 00:05:57,005 And so this will target the iPad in the portrait mode, 93 93 00:05:58,692 --> 00:06:00,442 which has 768 pixels. 94 94 00:06:02,373 --> 00:06:05,790 And again, the reason for this value here 95 95 00:06:06,671 --> 00:06:09,838 is that the iPad in the landscape view 96 96 00:06:11,054 --> 00:06:12,387 has 1024 pixels. 97 97 00:06:15,227 --> 00:06:18,695 So that will be in the next media query. 98 98 00:06:18,695 --> 00:06:21,326 So let me write it right here. 99 99 00:06:21,326 --> 00:06:25,076 So this goes from small tablet to big tablet. 100 100 00:06:30,775 --> 00:06:34,025 So, from 768 pixels, which is the iPad, 101 101 00:06:35,674 --> 00:06:36,924 to 1023 pixels. 102 102 00:06:44,215 --> 00:06:47,537 And now the last one, which will then target 103 103 00:06:47,537 --> 00:06:50,954 like, the iPad and all smaller computers. 104 104 00:06:54,567 --> 00:06:57,938 And I will define this as 1200, 105 105 00:06:57,938 --> 00:07:01,469 and the reason for this is that our row, 106 106 00:07:01,469 --> 00:07:05,636 that you surely remember, was defined as 1140 pixels. 107 107 00:07:07,989 --> 00:07:12,352 And so, I want the website to change its look 108 108 00:07:12,352 --> 00:07:15,102 when it gets close to that value, 109 109 00:07:16,034 --> 00:07:18,269 so that we always have some margins 110 110 00:07:18,269 --> 00:07:20,600 at the right and left side. 111 111 00:07:20,600 --> 00:07:22,003 But I will show you that in a moment, 112 112 00:07:22,003 --> 00:07:23,990 so don't worry about that right now. 113 113 00:07:23,990 --> 00:07:28,073 I will just say here that this is from big tablet 114 114 00:07:30,544 --> 00:07:31,794 to 1300 pixels, 115 115 00:07:34,500 --> 00:07:36,000 which is for width 116 116 00:07:38,480 --> 00:07:40,397 smaller than pixel row. 117 117 00:07:46,679 --> 00:07:50,846 Alright. So these are our media queries right here. 118 118 00:07:52,781 --> 00:07:56,963 In these media queries, we can then define all our styles. 119 119 00:07:56,963 --> 00:07:59,406 Let me just close this one here as well. 120 120 00:07:59,406 --> 00:08:00,323 This block. 121 121 00:08:01,171 --> 00:08:05,923 Alright, so in case that you're a little confused right now, 122 122 00:08:05,923 --> 00:08:09,987 just go back to the initial part of the video 123 123 00:08:09,987 --> 00:08:12,302 where I had that diagram. 124 124 00:08:12,302 --> 00:08:17,019 And there you can exactly see how these media queries work. 125 125 00:08:17,019 --> 00:08:21,852 That diagram does a really great job in explaining this. 126 126 00:08:21,852 --> 00:08:24,899 So one thing that I need to do right now 127 127 00:08:24,899 --> 00:08:28,030 as you can imagine, is to actually include 128 128 00:08:28,030 --> 00:08:30,968 this file here in our head. 129 129 00:08:30,968 --> 00:08:33,218 So I'll duplicate this line 130 130 00:08:35,204 --> 00:08:37,859 and then include the queries file, 131 131 00:08:37,859 --> 00:08:40,304 because if I wouldn't do this of course 132 132 00:08:40,304 --> 00:08:42,989 all of this wouldn't work. 133 133 00:08:42,989 --> 00:08:46,767 Also here in the head, I need to include another thing 134 134 00:08:46,767 --> 00:08:51,248 that is essential when you make responsive web design 135 135 00:08:51,248 --> 00:08:52,826 and it's this meta tag. 136 136 00:08:52,826 --> 00:08:56,929 We will talk about meta tags later in the course, 137 137 00:08:56,929 --> 00:09:00,346 but for now let's just put it right here. 138 138 00:09:01,190 --> 00:09:03,440 And we need a viewport one, 139 139 00:09:07,095 --> 00:09:10,095 and what we want to say here is that 140 140 00:09:11,315 --> 00:09:13,398 width equals device-width 141 141 00:09:17,319 --> 00:09:18,652 at initial-scale 142 142 00:09:21,290 --> 00:09:22,207 equals 1.0. 143 143 00:09:24,557 --> 00:09:27,969 So all that this will do is to tell mobile phones, 144 144 00:09:27,969 --> 00:09:32,289 for instance, that they should not zoom out the page. 145 145 00:09:32,289 --> 00:09:35,936 So that they should always start with the scale of one, 146 146 00:09:35,936 --> 00:09:38,968 which is exactly this here. 147 147 00:09:38,968 --> 00:09:40,763 And alright, now I think we're ready 148 148 00:09:40,763 --> 00:09:44,930 to start writing some CSS inside of those media queries. 149 149 00:09:46,584 --> 00:09:49,022 So how are we going to proceed now? 150 150 00:09:49,022 --> 00:09:52,664 We will basically for each breakpoint view the page 151 151 00:09:52,664 --> 00:09:56,587 and then fix everything that looks broken. 152 152 00:09:56,587 --> 00:10:00,337 So let's start to reduce the browser's width. 153 153 00:10:01,413 --> 00:10:06,288 So again, this is what it looks like in the normal way. 154 154 00:10:06,288 --> 00:10:09,464 And actually, the best thing to do now is 155 155 00:10:09,464 --> 00:10:12,425 to not use this live connection, 156 156 00:10:12,425 --> 00:10:14,889 but open the HTML file directly, 157 157 00:10:14,889 --> 00:10:18,399 because we will need the Google Chrome Developer Tools. 158 158 00:10:18,399 --> 00:10:19,899 So let me do that. 159 159 00:10:25,107 --> 00:10:26,475 And here we are. 160 160 00:10:26,475 --> 00:10:30,308 And the reason why we need the Developer Tools 161 161 00:10:31,598 --> 00:10:34,867 is actually because of this here. 162 162 00:10:34,867 --> 00:10:38,617 When we re-size the window, this shows us how 163 163 00:10:40,272 --> 00:10:42,189 the size of the window. 164 164 00:10:43,514 --> 00:10:47,347 So you remember our first breakpoint was 1200, 165 165 00:10:49,417 --> 00:10:50,584 which is here. 166 166 00:10:53,039 --> 00:10:56,786 And I will now show you why, 'cause imagine it wouldn't be 167 167 00:10:56,786 --> 00:10:57,777 then you see what happened 168 168 00:10:57,777 --> 00:10:59,931 to the text there on the left side? 169 169 00:10:59,931 --> 00:11:02,098 It just disappears, right? 170 170 00:11:05,308 --> 00:11:06,141 So 171 171 00:11:07,266 --> 00:11:11,349 1140 is the width of the row and of the text box, 172 172 00:11:13,485 --> 00:11:16,390 but then the text would be completely glued 173 173 00:11:16,390 --> 00:11:18,162 to the border of the browser 174 174 00:11:18,162 --> 00:11:21,329 and we don't want that, and also here. 175 175 00:11:22,622 --> 00:11:26,122 So that's why I chose the 1200 value here. 176 176 00:11:28,520 --> 00:11:31,603 So let's see what we can change here. 177 177 00:11:34,158 --> 00:11:37,995 So this box here is the hero text box. 178 178 00:11:37,995 --> 00:11:41,966 So let's go to the original definition 179 179 00:11:41,966 --> 00:11:44,216 of this in the header part. 180 180 00:11:46,065 --> 00:11:48,381 And let's see what we can do with this. 181 181 00:11:48,381 --> 00:11:52,548 So I will now go ahead and copy all of this into here. 182 182 00:11:55,841 --> 00:11:58,058 And then I will change the things 183 183 00:11:58,058 --> 00:12:00,308 that I want to change here. 184 184 00:12:02,354 --> 00:12:04,643 Now I don't want the width to be fixed anymore. 185 185 00:12:04,643 --> 00:12:07,226 I just want it to be 100%. 186 186 00:12:10,910 --> 00:12:13,599 So I don't want to change nothing of this 187 187 00:12:13,599 --> 00:12:15,844 and nothing of this. 188 188 00:12:15,844 --> 00:12:18,394 And in order to create some space then, 189 189 00:12:18,394 --> 00:12:21,869 between the text and the border of the browser, 190 190 00:12:21,869 --> 00:12:24,056 I will say that I want the padding 191 191 00:12:24,056 --> 00:12:26,928 to be zero on the top and the bottom 192 192 00:12:26,928 --> 00:12:31,178 and two percent on left and the right side. 193 193 00:12:31,178 --> 00:12:33,844 So now let's see what this looks like. 194 194 00:12:33,844 --> 00:12:35,078 We don't need to save it, 195 195 00:12:35,078 --> 00:12:38,623 because we have that auto save extension, 196 196 00:12:38,623 --> 00:12:39,997 but we will now have to reload this 197 197 00:12:39,997 --> 00:12:44,164 because we're no longer working with the live connection. 198 198 00:12:48,172 --> 00:12:50,962 So this is the 1200 limit. 199 199 00:12:50,962 --> 00:12:53,368 And let's see what happens. 200 200 00:12:53,368 --> 00:12:56,535 Okay. And this is kind of cool, right? 201 201 00:12:58,107 --> 00:12:59,940 Look at the text just. 202 202 00:13:01,259 --> 00:13:06,240 So now that effect that we had before no longer happens. 203 203 00:13:06,240 --> 00:13:07,999 So our width is 100%, 204 204 00:13:07,999 --> 00:13:12,484 and we can see that here in the Developer Tools. 205 205 00:13:12,484 --> 00:13:15,083 So we actually have that rule here 206 206 00:13:15,083 --> 00:13:17,186 and we see the width with 100%. 207 207 00:13:17,186 --> 00:13:21,560 Now if we make that bigger, then that rule goes away, 208 208 00:13:21,560 --> 00:13:25,310 because the media query does no longer apply. 209 209 00:13:26,421 --> 00:13:27,504 So very well. 210 210 00:13:35,055 --> 00:13:38,205 But what we see now here is that this text is still 211 211 00:13:38,205 --> 00:13:41,872 completely glued here to the browser border. 212 212 00:13:44,303 --> 00:13:47,058 And let me check that html. 213 213 00:13:47,058 --> 00:13:48,680 But I think it's inside of the row. 214 214 00:13:48,680 --> 00:13:50,430 Yeah, it actually is. 215 215 00:13:50,430 --> 00:13:52,172 So now I will define something 216 216 00:13:52,172 --> 00:13:55,089 for the row class and for all rows. 217 217 00:14:00,286 --> 00:14:04,735 And I'm going to say the same thing as I said up there. 218 218 00:14:04,735 --> 00:14:06,685 So I want the padding, 219 219 00:14:06,685 --> 00:14:08,153 and in order to make this look consistent 220 220 00:14:08,153 --> 00:14:10,986 I will use the same padding value. 221 221 00:14:11,989 --> 00:14:15,885 And I'm now going to format this a little bit different 222 222 00:14:15,885 --> 00:14:18,363 than from what I've done before, 223 223 00:14:18,363 --> 00:14:22,530 because every time we only have one declaration in a block 224 224 00:14:23,588 --> 00:14:27,171 we don't need to create all of those lines. 225 225 00:14:28,393 --> 00:14:31,726 And we should actually do the same here. 226 226 00:14:33,460 --> 00:14:37,627 Like here, for instance, but I'm not going to do that. 227 227 00:14:38,957 --> 00:14:41,040 But if you want to have a 228 228 00:14:44,710 --> 00:14:47,223 But if you want your code to look cleaner, 229 229 00:14:47,223 --> 00:14:51,064 then you should go ahead and do that. 230 230 00:14:51,064 --> 00:14:52,934 So again let's check that out. 231 231 00:14:52,934 --> 00:14:55,675 I'll refresh it, and now you saw that instantly 232 232 00:14:55,675 --> 00:14:59,842 that we now have this margin here, or this padding. 233 233 00:15:01,175 --> 00:15:03,737 And the same thing happens down here, actually, 234 234 00:15:03,737 --> 00:15:06,023 because all of these are rows. 235 235 00:15:06,023 --> 00:15:09,773 That's how we always have that distance here. 236 236 00:15:11,574 --> 00:15:13,052 Okay great. 237 237 00:15:13,052 --> 00:15:17,219 We actually see something really strange here happening. 238 238 00:15:18,722 --> 00:15:20,480 This because we opened the file now 239 239 00:15:20,480 --> 00:15:25,034 and not the browser connection so something changed. 240 240 00:15:25,034 --> 00:15:28,201 So let me change hello we're Omnifood. 241 241 00:15:29,459 --> 00:15:32,042 We see what's going wrong here. 242 242 00:15:32,939 --> 00:15:36,106 So it's this. We need to replace this. 243 243 00:15:46,610 --> 00:15:49,527 Alright. I think that's it for now. 244 244 00:15:50,821 --> 00:15:52,738 Here's also I'm hungry. 245 245 00:15:54,409 --> 00:15:55,984 Okay. 246 246 00:15:55,984 --> 00:15:58,567 So let's see what we have next. 247 247 00:15:59,647 --> 00:16:02,314 So this is our next media query, 248 248 00:16:03,340 --> 00:16:05,673 which goes from 768 to 1023. 249 249 00:16:09,172 --> 00:16:12,172 Let's check this out in the browser. 250 250 00:16:14,611 --> 00:16:18,778 Okay again, we need the Developer Tools to see the width. 251 251 00:16:21,238 --> 00:16:22,821 So let's go to 768. 252 252 00:16:25,835 --> 00:16:28,335 Okay, this will be our tablet. 253 253 00:16:29,479 --> 00:16:32,812 So let's see what we should change here. 254 254 00:16:34,038 --> 00:16:35,633 Actually, the first thing I'm going to do 255 255 00:16:35,633 --> 00:16:38,346 is to change the font-size. 256 256 00:16:38,346 --> 00:16:40,179 The overall font-size. 257 257 00:16:44,750 --> 00:16:45,583 So body 258 258 00:16:48,766 --> 00:16:49,599 font-size. 259 259 00:16:51,413 --> 00:16:53,956 And now it comes in very very handy 260 260 00:16:53,956 --> 00:16:56,368 that we defined all the font sizes 261 261 00:16:56,368 --> 00:16:59,747 across the entire web page in percentages, 262 262 00:16:59,747 --> 00:17:01,901 which means that all the font sizes 263 263 00:17:01,901 --> 00:17:05,284 are based on the base font size. 264 264 00:17:05,284 --> 00:17:09,451 So this was 20, and now I will make it down to 18 pixels. 265 265 00:17:11,147 --> 00:17:15,328 And now all the font sizes will automatically decrease 266 266 00:17:15,328 --> 00:17:17,828 and this is incredibly useful. 267 267 00:17:18,924 --> 00:17:22,792 And another thing that we should surely do, 268 268 00:17:22,792 --> 00:17:25,625 since we're now on smaller devices 269 269 00:17:26,600 --> 00:17:30,641 is to change the padding of the sections. 270 270 00:17:30,641 --> 00:17:34,097 And this was 80 pixels top and bottom 271 271 00:17:34,097 --> 00:17:37,180 and I will take it down to 60 pixels. 272 272 00:17:38,300 --> 00:17:42,467 Of course, I have to write the padding here, alright. 273 273 00:17:47,259 --> 00:17:49,342 So let me check this out. 274 274 00:17:51,741 --> 00:17:53,341 Re-size this. 275 275 00:17:53,341 --> 00:17:55,445 Okay, you see the text is smaller 276 276 00:17:55,445 --> 00:17:59,612 and I think it definitely looks more adequate to this device 277 277 00:18:01,489 --> 00:18:04,022 or to this browser width. 278 278 00:18:04,022 --> 00:18:07,858 And, yeah, we have less space between the sections, 279 279 00:18:07,858 --> 00:18:09,890 which also makes lot of sense. 280 280 00:18:09,890 --> 00:18:12,334 When you're on iPad, you don't wanna scroll 281 281 00:18:12,334 --> 00:18:16,501 through a website and see nothing but white space, right? 282 282 00:18:20,137 --> 00:18:22,387 So what else can we do now? 283 283 00:18:23,706 --> 00:18:27,539 For instance, this text here can be wider now. 284 284 00:18:30,120 --> 00:18:32,656 It looks kind of weird now. 285 285 00:18:32,656 --> 00:18:36,823 So you remember, let me check, it was the long copy class. 286 286 00:18:40,001 --> 00:18:42,918 Which is actually an overall class. 287 287 00:18:45,803 --> 00:18:47,360 Here it is. 288 288 00:18:47,360 --> 00:18:48,606 So let's change this. 289 289 00:18:48,606 --> 00:18:49,812 And again, I will copy of this 290 290 00:18:49,812 --> 00:18:53,895 and then change the things that I want to change. 291 291 00:18:56,698 --> 00:18:58,876 So line-height can stay the same, 292 292 00:18:58,876 --> 00:19:00,720 but width can now be 80%, 293 293 00:19:00,720 --> 00:19:03,529 and therefore the left margin needs to be 10, 294 294 00:19:03,529 --> 00:19:07,696 because 10 plus 10 makes 20, and 20 plus 80 makes the 100%. 295 295 00:19:11,916 --> 00:19:12,749 Alright. 296 296 00:19:14,709 --> 00:19:16,459 Save this, and great. 297 297 00:19:17,729 --> 00:19:20,511 So again, this is now really designing in the browser. 298 298 00:19:20,511 --> 00:19:21,725 We're gonna check everything 299 299 00:19:21,725 --> 00:19:25,892 and see which doesn't look right, and then fix it. 300 300 00:19:28,702 --> 00:19:32,074 So now that you know how to work with media queries, 301 301 00:19:32,074 --> 00:19:34,584 and build truly responsive websites 302 302 00:19:34,584 --> 00:19:38,457 let's take a small break and continue with what we're doing 303 303 00:19:38,457 --> 00:19:40,124 in the next lecture. 25801