1 00:00:01,808 --> 00:00:03,272 In this lecture, we'll continue 2 00:00:03,272 --> 00:00:05,855 to make our website responsive. 3 00:00:07,226 --> 00:00:08,554 So the next thing we can do here, 4 00:00:08,554 --> 00:00:11,664 is to remove some white space, for instance, 5 00:00:11,664 --> 00:00:13,143 here... 6 00:00:13,143 --> 00:00:15,768 And here between those steps, 7 00:00:15,768 --> 00:00:17,081 and here between the steps, 8 00:00:17,081 --> 00:00:18,331 and the button, 9 00:00:19,239 --> 00:00:23,737 and we will also increase this image a little bit 10 00:00:23,737 --> 00:00:25,428 and so let's go do that. 11 00:00:25,428 --> 00:00:27,948 We're still here at this media screen 12 00:00:27,948 --> 00:00:32,115 which will target from small tablets to big tablets. 13 00:00:33,820 --> 00:00:37,487 Alright, so we can start with the steps box, 14 00:00:41,717 --> 00:00:44,602 and let's say that it should have a margin top 15 00:00:44,602 --> 00:00:46,435 to only 10 pixels now. 16 00:00:48,360 --> 00:00:50,232 So I'm, as I said, 17 00:00:50,232 --> 00:00:54,232 starting to remove some of the white space here. 18 00:00:55,439 --> 00:00:57,772 So it also have the works... 19 00:00:59,413 --> 00:01:00,496 steps, right, 20 00:01:03,337 --> 00:01:07,504 and I will say that I want the margin bottom to be 40 pixels 21 00:01:08,845 --> 00:01:12,121 I think it was 50, if I remember it correctly, 22 00:01:12,121 --> 00:01:13,788 but, let's check it. 23 00:01:17,011 --> 00:01:18,344 It's old form... 24 00:01:22,610 --> 00:01:24,860 How it works section, okay, 25 00:01:27,286 --> 00:01:29,786 so the steps box had 30 and 70 26 00:01:30,763 --> 00:01:34,059 and now I'm going to set them to 10, 27 00:01:34,059 --> 00:01:35,558 and I'll actually have to do this 28 00:01:35,558 --> 00:01:38,641 for the steps box last child as well. 29 00:01:40,208 --> 00:01:44,927 Okay so the work steps, had a margin bottom here of 50, 30 00:01:44,927 --> 00:01:49,454 and I will have to set this one here as well. 31 00:01:49,454 --> 00:01:51,121 So let me copy this, 32 00:01:52,170 --> 00:01:56,337 and I'll also need the steps box last child, right? 33 00:01:59,968 --> 00:02:02,801 So this may be a little confusing, 34 00:02:03,824 --> 00:02:08,630 cause, y'know it's a lot of code we have to change here, 35 00:02:08,630 --> 00:02:12,792 so if you want you can then later review the code 36 00:02:12,792 --> 00:02:14,542 a little more slowly. 37 00:02:23,275 --> 00:02:26,078 So I want this to be 10 pixels as well, 38 00:02:26,078 --> 00:02:29,388 and now between the last steps and those buttons, 39 00:02:29,388 --> 00:02:32,555 I will say 60 pixels should be enough, 40 00:02:34,237 --> 00:02:38,226 and I will also now decrease the app screen, 41 00:02:38,226 --> 00:02:40,587 which is the image, 42 00:02:40,587 --> 00:02:42,545 and I want a width 43 00:02:42,545 --> 00:02:43,712 of 50 percent, 44 00:02:46,956 --> 00:02:50,706 so increase it from 40 percent to 50 percent. 45 00:02:54,775 --> 00:02:57,442 See it was 40 now it will be 50. 46 00:02:58,286 --> 00:03:01,619 Okay I'm going to reload this thing now. 47 00:03:03,116 --> 00:03:05,222 Well this looks much better, right? 48 00:03:05,222 --> 00:03:06,639 Let's re size it. 49 00:03:09,821 --> 00:03:13,071 Okay, so, here we have our break point, 50 00:03:15,012 --> 00:03:15,845 at 1023 51 00:03:19,435 --> 00:03:21,915 What does this... how it looks like? 52 00:03:21,915 --> 00:03:23,998 And as we get it smaller, 53 00:03:27,082 --> 00:03:29,832 so this is the other break point, 54 00:03:32,480 --> 00:03:34,134 okay, 55 00:03:34,134 --> 00:03:36,484 so this section looks good now, 56 00:03:36,484 --> 00:03:40,282 and now we have a little problem in here, 57 00:03:40,282 --> 00:03:43,365 because those icons are way too wide, 58 00:03:45,627 --> 00:03:48,960 so let's go back and reduce their width, 59 00:03:49,859 --> 00:03:54,026 and also I should actually decrease the font size in here. 60 00:03:57,991 --> 00:04:01,158 So, those icons are icons small class, 61 00:04:04,140 --> 00:04:05,890 so let me check them. 62 00:04:12,550 --> 00:04:15,300 So they had a width of 30 pixels, 63 00:04:17,369 --> 00:04:19,369 now we'll decrease that, 64 00:04:20,666 --> 00:04:23,438 to, let's say, 20 pixels, 65 00:04:23,438 --> 00:04:24,355 and then... 66 00:04:25,925 --> 00:04:27,758 the city future class, 67 00:04:31,447 --> 00:04:35,197 I will decrease it's font size to 90 percent. 68 00:04:39,963 --> 00:04:43,963 And let's reload this, and it looks much better. 69 00:04:47,010 --> 00:04:49,925 So there is still, like a line break here 70 00:04:49,925 --> 00:04:53,342 on some smaller width like this one here, 71 00:04:54,696 --> 00:04:55,529 So... 72 00:04:57,796 --> 00:05:00,213 We will decrease it even more 73 00:05:01,506 --> 00:05:03,089 to 17 for instance, 74 00:05:05,022 --> 00:05:07,189 and let me check it again, 75 00:05:08,801 --> 00:05:12,468 this margin right can be set to five pixels. 76 00:05:14,463 --> 00:05:18,468 So you see I'm changing a lot of stuff here 77 00:05:18,468 --> 00:05:20,923 and ya, I'm doing that because it really is important 78 00:05:20,923 --> 00:05:23,135 to make our websites look good 79 00:05:23,135 --> 00:05:25,718 on any device and on any width. 80 00:05:28,980 --> 00:05:31,842 So this doesn't change so much actually 81 00:05:31,842 --> 00:05:35,342 but, well, it's the best we can get right? 82 00:05:40,811 --> 00:05:43,644 So in here, everything looks okay, 83 00:05:44,538 --> 00:05:48,695 and now, so these boxes have a width of 90 percent, 84 00:05:48,695 --> 00:05:52,528 and a margin left of 5 percent to center them, 85 00:05:54,420 --> 00:05:56,670 so I'm going to change that 86 00:05:57,983 --> 00:06:01,233 down here and these are called plan box 87 00:06:04,346 --> 00:06:08,513 and so let's change now the width and say 100 percent 88 00:06:09,935 --> 00:06:12,935 and the margin left to zero percent. 89 00:06:16,759 --> 00:06:18,009 Let's check it, 90 00:06:19,080 --> 00:06:23,247 it's better and now let's decrease these font sizes here, 91 00:06:24,408 --> 00:06:27,438 and there's also some weird thing going on again 92 00:06:27,438 --> 00:06:31,236 with the HTML so I'm also going to fix that, 93 00:06:31,236 --> 00:06:35,403 but let's start by reducing the font size here of this. 94 00:06:37,452 --> 00:06:40,285 And that is the plan price, right? 95 00:06:43,685 --> 00:06:46,386 Actually going to copy this one, 96 00:06:46,386 --> 00:06:47,719 and put it here. 97 00:06:54,135 --> 00:06:57,468 And let's say you want it in 50 percent, 98 00:07:04,227 --> 00:07:07,840 so the code is getting much bigger 99 00:07:07,840 --> 00:07:10,507 and it's not always easy to find 100 00:07:13,157 --> 00:07:16,324 the stuff that we want to edit, right? 101 00:07:18,190 --> 00:07:21,440 Pdat is the problem, let's adjust that, 102 00:07:25,021 --> 00:07:26,021 Alright, so, 103 00:07:29,254 --> 00:07:30,587 alright and now, 104 00:07:32,162 --> 00:07:32,995 just let's 105 00:07:35,171 --> 00:07:39,338 increase the width of this contact form class as well. 106 00:07:41,138 --> 00:07:42,388 Contact form... 107 00:07:46,554 --> 00:07:47,804 And 80 percent. 108 00:07:50,276 --> 00:07:54,559 So we still don't want this to be full width, 109 00:07:54,559 --> 00:07:56,976 but a little wider is better. 110 00:07:57,880 --> 00:07:58,713 Alright, 111 00:08:01,836 --> 00:08:04,153 so this looks good now. 112 00:08:04,153 --> 00:08:08,153 So we fixed everything in this media query here, 113 00:08:09,062 --> 00:08:11,779 so now let's get to the next one, 114 00:08:11,779 --> 00:08:15,946 and this one is for small phones to small tablets, 115 00:08:17,474 --> 00:08:20,000 for instance, the iPhone six, 116 00:08:20,000 --> 00:08:24,283 so I will put this browser to this lowest width 117 00:08:24,283 --> 00:08:25,450 of 481 or 480. 118 00:08:30,332 --> 00:08:31,165 So... 119 00:08:34,896 --> 00:08:36,057 You see the width up there, 120 00:08:36,057 --> 00:08:38,807 and 480 is absolutely very small, 121 00:08:40,046 --> 00:08:42,796 let's say like 500, close to 500. 122 00:08:47,012 --> 00:08:50,668 So, a lot of things going on here, 123 00:08:50,668 --> 00:08:55,007 all of this looks quite bad right now, right? 124 00:08:55,007 --> 00:08:57,322 So that's what I mean we really need to adapt this, 125 00:08:57,322 --> 00:08:58,989 look at this button. 126 00:09:03,679 --> 00:09:06,083 And you also notice a strange thing here, 127 00:09:06,083 --> 00:09:07,666 which is this here, 128 00:09:09,512 --> 00:09:11,762 so now we have this problem 129 00:09:13,343 --> 00:09:17,510 because some of the text goes out of the actual width. 130 00:09:19,770 --> 00:09:23,103 So, let us fix that and it's easy to do. 131 00:09:25,314 --> 00:09:26,564 We just need to 132 00:09:28,324 --> 00:09:30,605 add a new style here, 133 00:09:30,605 --> 00:09:33,688 which is overflow x, and then hidden, 134 00:09:35,553 --> 00:09:37,224 so now that will get hidden, 135 00:09:37,224 --> 00:09:40,325 and we actually should do the same for the buddy, 136 00:09:40,325 --> 00:09:43,826 and we can actually add buddy here, 137 00:09:43,826 --> 00:09:46,409 it's not such a big difference. 138 00:09:47,396 --> 00:09:50,165 So now that will be fixed and problem as well, 139 00:09:50,165 --> 00:09:53,334 so let's go back to our queries and start adding some code 140 00:09:53,334 --> 00:09:55,417 to this media query here. 141 00:09:56,400 --> 00:10:00,567 So I'll start by reducing the body font size even more, 142 00:10:02,264 --> 00:10:03,681 to now 60 pixels, 143 00:10:08,234 --> 00:10:09,484 and the section 144 00:10:11,465 --> 00:10:14,706 I will reduce the padding between those 145 00:10:14,706 --> 00:10:17,230 so the white space between those 146 00:10:17,230 --> 00:10:19,529 which we set to 60 before 147 00:10:19,529 --> 00:10:21,130 but now we have really small devices 148 00:10:21,130 --> 00:10:24,161 so let's say 30 pixels and zero. 149 00:10:24,161 --> 00:10:26,494 And now the padding at rows, 150 00:10:30,057 --> 00:10:33,767 we set it before at, yep, two percent, 151 00:10:33,767 --> 00:10:36,850 but let's set it to four percent now, 152 00:10:37,912 --> 00:10:38,745 so row 153 00:10:40,405 --> 00:10:43,488 and also this box this hero text box, 154 00:10:44,764 --> 00:10:46,847 this is equally important 155 00:10:48,135 --> 00:10:49,302 in the header. 156 00:10:50,781 --> 00:10:55,553 So let's set their padding on the left and the right side. 157 00:10:55,553 --> 00:10:57,955 So zero in top and bottom 158 00:10:57,955 --> 00:11:00,872 and four percent at left and right. 159 00:11:03,960 --> 00:11:06,154 And before we go check how this looks, 160 00:11:06,154 --> 00:11:08,313 we can do one last thing, 161 00:11:08,313 --> 00:11:09,674 and this is, 162 00:11:09,674 --> 00:11:11,257 that we now want to 163 00:11:14,446 --> 00:11:17,720 define the width of all the columns as 100 percent 164 00:11:17,720 --> 00:11:19,698 which means that the columns will no longer be 165 00:11:19,698 --> 00:11:23,865 side by side but will be stacked on top of each other. 166 00:11:26,420 --> 00:11:29,253 So let's see what that looks like. 167 00:11:30,202 --> 00:11:31,785 Alright here we go, 168 00:11:33,936 --> 00:11:35,295 still have this problem here 169 00:11:35,295 --> 00:11:37,682 I'm going to talk about it in a second. 170 00:11:37,682 --> 00:11:41,442 So, this is what I was talking about, 171 00:11:41,442 --> 00:11:44,359 those are now on top of each other. 172 00:11:46,753 --> 00:11:48,789 Right here we have some weird stuff going on, 173 00:11:48,789 --> 00:11:50,324 I'm going to fix that in a second, 174 00:11:50,324 --> 00:11:53,494 those images are way too large, 175 00:11:53,494 --> 00:11:57,550 and down here everything looks quite good. 176 00:11:57,550 --> 00:12:00,825 But, yep, one thing after the other. 177 00:12:00,825 --> 00:12:04,170 I'm first going to fix this navigation, 178 00:12:04,170 --> 00:12:07,599 and in fact, we're going to build a mobile notification 179 00:12:07,599 --> 00:12:09,182 in the next section 180 00:12:10,444 --> 00:12:13,777 where we will start learning some jQuery 181 00:12:15,006 --> 00:12:19,173 and so for now, I'm just going to hide all of the navigation 182 00:12:20,212 --> 00:12:22,686 and that's pretty easy to do actually, 183 00:12:22,686 --> 00:12:23,936 I will just say 184 00:12:25,089 --> 00:12:26,006 main nav... 185 00:12:28,978 --> 00:12:29,978 display none 186 00:12:31,998 --> 00:12:35,415 and this will hide the entire navigation. 187 00:12:38,111 --> 00:12:38,944 Alright... 188 00:12:41,786 --> 00:12:43,203 The class name... 189 00:12:46,975 --> 00:12:49,808 Okay and that looks better for now 190 00:12:51,797 --> 00:12:56,658 So, I'm not going to change every little detail here now 191 00:12:56,658 --> 00:13:00,825 because, y'know, you can change that later on yourself, 192 00:13:02,092 --> 00:13:04,669 I'm just going to fix the most important thing now, 193 00:13:04,669 --> 00:13:07,368 which is for instance, this margin here, 194 00:13:07,368 --> 00:13:11,535 so I now want this paragraph to be 100 percent wide as well 195 00:13:13,064 --> 00:13:17,417 so that's one of the things that I'm going to change 196 00:13:17,417 --> 00:13:19,741 then we can probably make these 197 00:13:19,741 --> 00:13:22,408 H2 elements a little bit smaller 198 00:13:23,434 --> 00:13:26,429 and the H1 element as well, 199 00:13:26,429 --> 00:13:29,456 and then take away some more white space here 200 00:13:29,456 --> 00:13:32,873 from this section will also be important, 201 00:13:33,952 --> 00:13:38,119 and I think down here most of the thing look pretty good. 202 00:13:42,417 --> 00:13:45,084 So, no need all this space here, 203 00:13:47,553 --> 00:13:49,138 you already had changed the long copy here 204 00:13:49,138 --> 00:13:52,475 but now I'm gonna go even further 205 00:13:52,475 --> 00:13:54,892 and say 100 percent in margin 206 00:13:56,409 --> 00:13:57,409 zero percent 207 00:13:59,788 --> 00:14:01,033 but then as I said I will also 208 00:14:01,033 --> 00:14:04,535 reduce the font size of the H1 element. 209 00:14:04,535 --> 00:14:05,535 So font size 210 00:14:07,269 --> 00:14:08,102 let me say 211 00:14:10,245 --> 00:14:11,162 180 percent 212 00:14:14,078 --> 00:14:17,561 and I will duplicate this for the H2 element 213 00:14:17,561 --> 00:14:20,478 and reduce the size to 150 percent. 214 00:14:23,500 --> 00:14:24,667 Okay, and now, 215 00:14:26,164 --> 00:14:27,247 going back to 216 00:14:28,412 --> 00:14:32,643 this code here which is for the how it works section, 217 00:14:32,643 --> 00:14:36,476 let's make this white space even smaller here, 218 00:14:39,243 --> 00:14:40,829 let me check how it looks 219 00:14:40,829 --> 00:14:43,746 so that I know what to change here, 220 00:14:47,232 --> 00:14:51,399 so the most important thing is to reduce this here, right? 221 00:14:53,977 --> 00:14:57,310 So let's do that, so we don't need this, 222 00:14:59,915 --> 00:15:01,588 probably 20 pixels is great 223 00:15:01,588 --> 00:15:05,755 and here also 20 we don't need so much white space. 224 00:15:07,524 --> 00:15:10,607 And one other thing I should do there 225 00:15:12,030 --> 00:15:15,697 is to reduce the circle in the work section, 226 00:15:30,454 --> 00:15:34,042 so let's change this here maybe to 227 00:15:34,042 --> 00:15:34,875 40 pixels 228 00:15:36,183 --> 00:15:38,350 and 40 pixels here as well 229 00:15:39,353 --> 00:15:42,686 we'll of course not change any of those. 230 00:15:48,393 --> 00:15:50,476 Change this to 15 pixels, 231 00:15:54,574 --> 00:15:57,326 and also decrease the padding a little bit, 232 00:15:57,326 --> 00:16:01,243 so make all of the things a little bit smaller. 233 00:16:04,432 --> 00:16:07,251 Okay, something is not working here right now, 234 00:16:07,251 --> 00:16:09,918 this space is still way too big. 235 00:16:12,387 --> 00:16:16,137 I guess because I misspelled this right here. 236 00:16:22,229 --> 00:16:24,144 Okay, now it looks better, 237 00:16:24,144 --> 00:16:27,210 and I just need to change the font size in here, 238 00:16:27,210 --> 00:16:31,377 and to, of course, put this image here in the center. 239 00:16:35,133 --> 00:16:36,216 So font size, 240 00:16:40,167 --> 00:16:42,412 100 percent let's say... 241 00:16:42,412 --> 00:16:43,329 120 in fact 242 00:16:45,864 --> 00:16:47,432 and... 243 00:16:47,432 --> 00:16:49,015 So where is that... 244 00:16:51,043 --> 00:16:53,126 So this is for the image, 245 00:16:54,510 --> 00:16:56,927 so the steps box first child, 246 00:17:00,152 --> 00:17:02,569 I now want it to be centered. 247 00:17:11,459 --> 00:17:15,292 Alright, let's just re size this a little bit. 248 00:17:17,342 --> 00:17:20,592 Woah the image is so incredibly big now 249 00:17:22,217 --> 00:17:26,300 so we better make that a little bit smaller again 250 00:17:28,533 --> 00:17:30,116 so where is that... 251 00:17:32,979 --> 00:17:34,729 Here it's app screen, 252 00:17:36,758 --> 00:17:40,930 app screen and I'm going to change that to 40 pixels, 253 00:17:40,930 --> 00:17:44,013 okay looks like the correct size now, 254 00:17:47,681 --> 00:17:49,281 alright, 255 00:17:49,281 --> 00:17:53,410 so as I said I will let you tweak other minor things 256 00:17:53,410 --> 00:17:57,467 here on the website on your own with your own CSS 257 00:17:57,467 --> 00:18:00,324 but there's still one thing that I need to fix 258 00:18:00,324 --> 00:18:02,449 and it's this here. 259 00:18:02,449 --> 00:18:04,159 You see, these columns doesn't start 260 00:18:04,159 --> 00:18:06,242 at the same point, right? 261 00:18:07,886 --> 00:18:11,664 So the first column is different that this one here, 262 00:18:11,664 --> 00:18:15,831 and that is actually because I forgot to change one thing 263 00:18:16,710 --> 00:18:19,411 and it has to do here with the column 264 00:18:19,411 --> 00:18:22,565 and this comes actually from this grid file, 265 00:18:22,565 --> 00:18:24,898 so all columns have a margin 266 00:18:26,690 --> 00:18:30,857 which is this one, let me copy it, to our query CSS 267 00:18:31,949 --> 00:18:35,366 so that we can change it to what we want. 268 00:18:40,014 --> 00:18:43,341 So currently we have a left margin of one percent 269 00:18:43,341 --> 00:18:44,341 zero percent 270 00:18:46,897 --> 00:18:48,414 at right side, 271 00:18:48,414 --> 00:18:52,401 one percent bottom, and one point six on the left. 272 00:18:52,401 --> 00:18:56,303 So now we don't want anything of that, 273 00:18:56,303 --> 00:18:59,280 we want the margin to be zero here, 274 00:18:59,280 --> 00:19:00,657 zero on the right, 275 00:19:00,657 --> 00:19:03,653 and on the bottom is the only place we want some margin, 276 00:19:03,653 --> 00:19:05,653 because we want, y'know, 277 00:19:06,560 --> 00:19:10,374 we want some distance here between those boxes, 278 00:19:10,374 --> 00:19:14,541 so let me put this to four percent and this also to zero 279 00:19:16,468 --> 00:19:20,048 and that will now fix this weird thing, ya, 280 00:19:20,048 --> 00:19:21,284 and this looks much better 281 00:19:21,284 --> 00:19:25,408 now we have some space here between the boxes, 282 00:19:25,408 --> 00:19:29,075 and they all start at the same place, right. 283 00:19:31,084 --> 00:19:34,167 So I think this looks cool now and... 284 00:19:37,894 --> 00:19:39,669 That's now... 285 00:19:39,669 --> 00:19:42,418 Look here at our last media query 286 00:19:42,418 --> 00:19:45,668 which is for really small screen sizes. 287 00:19:46,567 --> 00:19:48,900 Let me just put this here 288 00:19:48,900 --> 00:19:52,400 like actually can put it smaller than this 289 00:19:54,456 --> 00:19:56,318 and it still looks good in here 290 00:19:56,318 --> 00:20:00,099 so I guess maybe not so much to change. 291 00:20:00,099 --> 00:20:04,174 So all I'm going to do is make this form 100 percent wide 292 00:20:04,174 --> 00:20:07,950 and to remove even more padding between those sections 293 00:20:07,950 --> 00:20:12,758 because we have to imagine that it's a really small phone. 294 00:20:12,758 --> 00:20:17,409 So let me just make some minor changes here in fact. 295 00:20:17,409 --> 00:20:19,159 So I will say section 296 00:20:22,894 --> 00:20:26,311 padding we had 30 pixels let's say 25 now 297 00:20:28,606 --> 00:20:30,523 and zero left and right 298 00:20:32,627 --> 00:20:34,294 and the contact form 299 00:20:38,360 --> 00:20:39,693 can have a width 300 00:20:41,773 --> 00:20:43,537 of 100 percent 301 00:20:43,537 --> 00:20:46,466 so I just didn't want to leave this empty 302 00:20:46,466 --> 00:20:50,400 but in fact it maybe was not so necessary 303 00:20:50,400 --> 00:20:52,316 but who knows maybe in your future websites 304 00:20:52,316 --> 00:20:55,347 you will actually need this media query. 305 00:20:55,347 --> 00:20:59,347 So I'm going to reload this for the last time... 306 00:21:03,239 --> 00:21:06,989 And so this is our website on a mobile phone, 307 00:21:09,708 --> 00:21:13,937 so feel free to change some more stuff here on your own 308 00:21:13,937 --> 00:21:16,648 because now you know how all of this works, 309 00:21:16,648 --> 00:21:20,218 but I'm going to leave it as this. 310 00:21:20,218 --> 00:21:21,595 So, we are now done 311 00:21:21,595 --> 00:21:24,420 with the HTML and CSS part of our website actually 312 00:21:24,420 --> 00:21:27,798 so congratulations, in the next lecture, 313 00:21:27,798 --> 00:21:31,786 we will just test this website on different browsers, 314 00:21:31,786 --> 00:21:35,931 which is a very important aspects of web design 315 00:21:35,931 --> 00:21:37,882 and web development. 316 00:21:37,882 --> 00:21:39,299 So see you there.