4.13 CSS: Making It Responsive (Part 1)
The website is almost complete. Now you have to make sure it looks good on all devices. That's what I'll show you in this lesson.
1.Introduction1 lesson, 01:35
2.From Beginner to Pro7 lessons, 38:33
3.Creating a PSD Design4 lessons, 35:36
4.Rewriting the Code14 lessons, 1:42:32
5.Conclusion1 lesson, 00:57
4.13 CSS: Making It Responsive (Part 1)
Hey, welcome back. So this website is almost complete. The HTML is written, the CSS is done, everything is styled properly. Now we only need to make it responsive and what does that mean? Well, making sure that it looks properly on large desktops as well as smaller devices like mobile phones. And the way to do that is basically writing certain media queries into CSS and altering how different elements look like. So let me give you an example. Let's resize this page and look at what happens when I reach a certain point there. The navigation went on a separate line. Now this is called a break point. It's a point where something has changed and if we take a look at the inspector and resize this again, we can see that the change occurs at 1,200 pixels there. Yeah, look at the top right corner of the page. And if we resize even further, we can see another change at around 992 pixels. That's another break point. So were gonna start with this first break point and see what changes and what we can do about it. So let's scroll down. There we go, 1200 pixels. At this stage, the way columns are rendered is different. You can also see it here. And basically, anywhere we used columns. In this case, the solution is actually quite simple, because the Bootstrap Grid System helps us, because this is a responsive grid system. We can alter the HTML. In my case, when I reach this break point, the columns will change dimensions. But I can go here and I can do this. Col-md-4 and I can go here and say, col-md-8. What, what this means is on a medium sized screen, I still need four columns and eight columns respectively. So now this back in place. All right? If I scroll down even further, we have another change and then I can add col-sm-4. And again, col-sm-8. And if I save this, the menu is back in its place where it should be. So that's how you benefit from the grid system. And it can go even further at the next break point, which is, let's see, around 768. There's another break point. I can go even further and targets those columns using col-xs, which is extra small. And I can do again, 4 and I can do col-xs-8 and now the menu is back in its place. But actually for this extra small size, we're gonna change that menu completely. So that's that's another thing. But for now, the menu is fine. So let's see what else is broken the recent projects area here. Let's see. We have basically, the same column size, col-lg-4. So what I'm gonna do is add col-md-4 and col-sm for small, 4. And I'm gonna copy this and paste it on the other columns. [BLANK_AUDIO] And there. Save and now we have columns again. But notice the images are a bit too big. So to take care of that, I need to go back into main.less. I need to target these images from the portfolio thumb and I need to set a width of 100% and height: auto, just like I did with the images from the slider. Save and now the images will resize according to their parent element. In this case, the grid columns. Okay. This looks good. Let's see. Portfolio, this also looks good. About, okay. Now, on these other pages, I need to copy the new header, because it has some additional classes. So, I'm just gonna copy this. Go to portfolio and paste the entire header, like that and then about, do the same. Okay. So now the menu works in all pages, Portfolio, About and Home. Okay. So what else? For the first break point, things are looking very good. For the second break point, which is at, let's see 900, what is this? 992. Look, another change there. Okay. So, on 992, the menu looks good. Let's scroll down. But notice the hover contents are a bit off, so what I'm gonna do here is actually change how this is rendered. Instead of a hover, I'm gonna move the hover contents below the image. So let's load the responsive rules, responsive.less. And I'm gonna say, media max-width: 992 pixels. So when my screen width has a maximum value of 992 pixels, I'll do the following. Hover-contents and I'm going to actually copy the styles from, from the main file here. And inside a media query, I'm just gonna list the differences. So first of all, I'm gonna reset the position to relative. So, it's no longer hidden. Yeah, and then top zero. We don't need this anymore. Color white, we don't need this. Text-align: center is already there. Height, width: 100% is no longer there. Actually, text-align, I got to set it to left. Okay. Let's reset the padding. Instead of this, I'm gonna put zero. The background color, I'm just gonna put transparent. Okay. Next the h3, the color is gonna be color-text, simple and I'll decrease the font-size. So, I'm gonna go with font-size: 1m, which is 18 pixels. And margin-bottom, I'm gonna set it to zero, because I'm actually gonna hide this paragraph. So, in here, I'm gonna say, display set to none. So lets see what else. This looks good. The hover state, we don't have to worry about this, because on this size you're already viewing it on a mobile device. Maybe these narrow paragraphs that I did can be a bit longer. So, I'm gonna put it here, narrow-paragraph. Let's set the width to about 80% instead of 65. And now let's do this paragraph. Okay. So now the paragraphs are a bit bigger and why not maybe add 90%, something like that. So that is it for the Home page. Let's see the Portfolio. This is still looking good and About. Okay. Good. Now let's resize this even further. So the next change will be around 768. There. On this width, we're already talking about small screens. And there are a few changes that we have to make here, so I'm gonna leave that for the next lesson. See you soon.