- So, now with our large screen layout complete, now we're ready to start some Media Queries and adjusting our layout based on the screen width. So, in your browser you can start to see what happens to the design when we decrease the width of the browser by grabbing the right-hand side of your browser and just collapsing this down. As we get to a certain points, like right here, for example, we can see that our heading starts to wrap. We can see that our anchor link here is overlapping some items in the background. If we continue to shrink this, we can see that strange things happen with our menu because now these items are stacked on top of each other.
And if we scroll down, we can see columns get a little hard to read, pictures get rather large, and some content is actually floating or moving off the stage. And we can see that certain content starts to float off stage and even break into other elements. So, the idea behind Responsive Design, using CSS Media Queries is that we can make adjustments to our layout based on the screen size. So, the first set of Media Queries I want to make is going to be for about 1000 pixels, so somewhere in about this range here. So, I'll make some minor adjustments and get in our first Media Query, and then we'll continue to make adjustments as we go along.
So, let's go back to our CSS file. Let's scroll down to the bottom. After the footer element, I want to start putting in our Media Queries. So, I'll add another CSS comment. We'll just call this Media Queries. And the first Media Query value we want to target is going to be for 1000 pixels on the width. So, we'll start with an @ symbol, then we'll type media, then a space, next we'll type screen, so we're going to target screens.
Then we'll type and then a space, then put in parentheses, then we'll type max-width: 1000px Then after the parentheses, we'll put in our brackets. Then we're going to split this open. So, now any rules that we put inside of here, will take effect until the screen size is at a maximum of 1000 pixels. Once we're above 1000 pixels, these rules will no longer apply. But anything under 1000 pixels, these rules will also take effect.
Which means any rules that we redefine from up above will take presidence because they're being defined later in our CSS file. So, the first thing we're going to do is at 1000 pixels, let's change the size of our H1 tag. So, we'll add an h1, put in our brackets, then we'll add font-size: 2.4em; So, this will make the heading font a little bit smaller to help with some of the text wrapping. Next, I'm going to add another CSS comment.
We're going to target the header area inside of here. So, the first thing we're going to do is target the div. So, we'll type header div.hero Another set of brackets. And then inside of here, we're going to reset the left property to 56%. Let's duplicate this rule. div.hero h1 So, now we'll make another change to the H1 if it's inside of the div with the class of hero. Now, we're only using one H1 in this particular design, but this will give us the ability to reuse this style sheet on another page where you don't have a hero area, but you do have an H1.
So, if the H1 is inside of the hero element, we're going to reset the margin bottom to just 20 pixels. That way since we decreased the size of the type, we want the anchor link with the class of button to be a little bit closer to the smaller type. So, now let's add a few more lines and let's make one adjustment to the section element with a class of atmosphere. So, I'll come in here and add a comment for myself. So, I'll add another CSS comment, Section - Atmosphere So, I'll type section.atmosphere space, then we're going to target the article element inside of that section element.
Put in our brackets. let's reset padding-left: to 400 pixels, making that a little bit smaller. And we're also going to change the size of the background image. So, we're going to choose background-size: 375px for the width and for the height, we're going to set auto. So, that gives us the ability to just define one property in the background size and not have to constantly calculate the proportion of that image. So, with these in place, let's go back to the browser. Let's hit reload. Now, we're at our maximum width here, but if we collapse this down, once we hit that 1000 pixel mark, you'll see that the heading got a little bit smaller, the anchor link got a little closer, and if we scroll down, we'll now see a slightly smaller image with a little more room for the type in the atmosphere section.
So, if I open this up, that's the full size. And then here we're crossing that 1000 pixel threshold. So, now that we've created our first Media Query in our CSS and we've made some minor adjustments, next we'll start making some more dramatic changes, for medium size screens.
The exercise files for this course are free to all members. Download them and start creating your own responsive websites today.
- Planning your layout
- Creating HTML containers, content, and links
- Creating and styling the layout with CSS
- Creating a menu system
- Styling headings, body text, and footers
- Styling and repositioning navigation links
- Swapping high-resolution graphics for Retina displays
- Making sure content is printable