4.14 CSS: Making It Responsive (Part 2)
In this final lesson of the course we'll style the website accordingly for small devices.
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.14 CSS: Making It Responsive (Part 2)
Welcome back. This is the final lesson of this course and in the previous lesson I started making this website responsive. So it looks good for the first couple of break points but when we get to let me just bring up the inspector. When we get to 768 pixels, that's another break point. And this one will require some more extensive work. So I'm gonna start by adding a new media query, so media, set max width to 767 pixels. Now the first major change will be on the header. Instead of a fixed header, and a semi-transparent one, we're gonna have the following. So going to header, I'm gonna grab this and paste it right here. And let's see. Background color. Instead of this rgba, I'm gonna use a solid color, the same one I used in the footer. Next, Padding. This one will stay the same. Position will be relative instead of fixed. So now it will scroll with my other content. Next width, I'm gonna delete these two. Because they are the same. And I'm only gonna say, text align center. Now, the main navigation. The main navigation looks something like this. So I'm just gonna copy it. And then float is gonna be none, because I want it to be aligned on the center. I also want it to have a bit of distance from the logo, on the top side. So I'm gonna say margin-top, baseline. Like that. I have this let me show you. I have, on each list item I have this margin left, which you can see in yellow. And this was used because the menu was aligned on the right side and I needed to space out these elements. But, in order to center this properly in the page, I need to get rid of this margin left on the first element. So I'm actually going to delete this bit and say ul li, first child, margin left set to zero. Okay. That's better. And also, I'm gonna target the anchor tags, because if you remember, each anchor tag had a line height of base line times two. And I'm just gonna put a line height of one because we don't need to align it now vertically with, with anything, basically. So now we have the same padding in the top of the box and on the bottom of the box. Now, this is a mobile device. So, it can go as low as this. In this case, a slider here just doesn't make sense. So, I'm just gonna hide it. Was it? What? It's called homepage-slider and set display to none. [BLANK_AUDIO] Now I need to push down this section. So let's see how it's called, Header with a class of section header. So that's next on the list, section header. Set a margin top of, let's do a base-line and see if it's enough. Nope, times two. Okay. Something like that. And, what else? The images will now scale properly. See? [BLANK_AUDIO] And actually, since we're on this lower size, let's put the Subscribe button below the input all the time. So, I'm gonna say, let's see, footer, I am looking for the form. There it is, Footer subscribe. So just copy this and I'll target the input, type submit and to put it on it's own line, I can only say display set to block. And then I need to align it in the center. So, I'm gonna say margin, let's do a baseline on the top to distance it from the input. Auto right, zero bottom, auto left. Okay. So now this is in the center. [BLANK_AUDIO] Let's see the other pages on this low resolution. So Portfolio. Now for the portfolio notice this box is kinda big, this header. So let's go ahead and target that one. Let's target the fancy-box h1 and lower its font-size to about 40 pixels. And let's see what kind of styles we have on it. Fancy box, page-banner. Okay. So this is the, these are the styles. And I'm just gonna paste them here and choose only what I need. So text align center, yes, this will stay. Height. this will stay. The padding, the padding top let's reduce this, maybe times four. So it's kind of in the middle of the image. And then the margin bottom, since this header no longer overlaps this area, we can decrease the margin. Bottom, so instead of the theme margin. Let's see how this looks like actually. A bit less. So maybe baseline times two. Okay. That looks good. Current project, the slider here we'll keep. Okay. About. [BLANK_AUDIO] Yup, that looks good. Let's get a home page again. [BLANK_AUDIO] And that's it basically. That's the simplest way to make web sites responsive. Here's the proper grid and use media queries.