Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,800 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- What is responsive design?
- Installing the Anaximander example theme
- Deciding what screen sizes to target
- Designing menus
- Adding responsive images and video
- Using CSS media queries to apply different styles
- Handling sidebars on mobile displays
- Dealing with footer widgets
- Installing jQuery Masonry
Skill Level Intermediate
When creating a responsive theme, or any theme for that matter, I like to start from the top; that means starting with the header itself. The challenge with a header is that it usually has to contain multiple different components: the site title and tagline, usually a background image of some sort, and also the menu, like you see here. Your job is to make sure each element stacks up nicely, both to match your design and also to be the easy to understand and functional. Out of the box, Anaximander will have the site title and tagline, and then the menu should appear directly under it.
In some cases, in some browsers, the menu will appear shifted to the right here, and that's fine, because we're going to be working on realigning the header right now to make it match the design. If we look at the design, you see that the title and tagline is shifted to the left and the menu is shifted all the way to the right, and that's what we want to achieve. If we were working with a static site, this would be very simple. We'd simply float the title and tagline to the left, and then we'd float the menu to the right.
However, because this is a responsive site, we have to be a little careful about what we were doing here. First of all, we have to use percentages to decide the area that the title and tagline is going to fit and the area that's going to be occupied by the menu so that as the window decreases in width, the proportion of area occupied by the title and tagline in the menu remains the same even though the pixel widths change. But there's an added challenge here. Like I said, the logical thing to do here would be to simply float one component to the left and the other to the right.
What you want to end up with is an area occupied by the title and tagline and another area occupied by the menu. However, if you float this content, what will happen is the browser will assign vertical space for each of these items, and it will say, as long as the item on the right has smaller or the same vertical space as the item on the left, they should float left and right. However, if the item on the right occupies more vertical space than the item on the left, then the item on the right is allowed to float in under the item on the left, and you end up with this.
As a result, while a short menu will look fine because it floats properly, a long menu will float in underneath the header, and that's not what we want to do. We want to ensure that even in the case where the menu is very long, it will stay on its side of the layout. To do that, we have to be creative. What we need to do is float the entire container that contains both, the title, the tagline and the menu to this right space.
Then we're going to use a negative margin to float the title and tagline outside of that space and place it to the left. By doing that, we're ensuring that no matter what happens, the menu will continue to contain the same horizontal space and title and tagline will always stay on the left. To do this, we need to find out what percentage of area the title and tagline is covering and what percentage of area the menu is covering. There is a math formula for this.
What you do is you find the width that you want, so that's the short width. You multiply that by 100 and then you divide the result by the total width of the entire area. This will give you the percentage of the shorter width in relation to the full width. If we look at our design and look at the guides, we'll see that the total width for the entire area is 940 pixels, and the area we want to be occupied by the title and tagline is 320 pixels.
So the first thing we'll do is take the container that contains all the elements and shift it to the right by giving it a margin to the left. So first, we'll find out what container that is. I'll use the Web Developer tools to identify the container. If I just scroll up here, you'll see. Here it is, header-container, and then I have to find the percentage. I will go to my style sheet and find the header-container. Here it is. Then I want to set margin-left and now I need the percentage.
So I'm going to open my calculator and then I want 320 pixels, which is the short width. I'm going to multiply it by 100, and then I'm going to divide that by the total width, which is 940 pixels. We get 34.04, et cetera, et cetera. So I'm going to copy that entire value, paste it in, percentage, and close the style. When I save that and reload my page, you will see that all the content is now shifted over to the right.
The next thing I need to do is move this title and tagline back over to the left. However, now we're working with a smaller total width. So what I need to do now is find out the percentage width that is equivalent to 320 pixels out of this new area. This new area, if you look at it, is 620 pixels. So I'll go and do the math again, this time 320*100/620.
This gives me 51.61, et cetera. I'll copy that, and then I need to apply that to just this header section. So I'll go in, use my Web Developer tools to find out what the section is. It's called id="header-title". Go back into my Style Sheet, find #header- title, and say margin-left again. And this time I want to do a negative margin because I want to shift it outside the box, so I'll say minus and paste in the percentage. I'll save it, reload the page, and you see now my title is on the left and my menu is on the right; however, the title is knocking the menu down.
To avoid this, I'm going to float the title to the left. So I'll go float: left. Save it, reload it, and now the title and tagline are on the left and aligning with the menu. But there is one more thing I need to do. When we resize this window, you'll see that when we get down to a certain point, it looks like that effect I was talking about where the content is floating underneath happens, even though it's not supposed to. But that's not the case. What we're seeing here is the title doesn't have a percentage width yet, so therefore it's pushing the content in the menu to the right.
The final thing we need to do is to give this menu area the correct percentage width. That percentage width is the percentage width of this area in comparison to the total area. In other words, the menu takes up 51.61, et cetera, percentage and we want the other half of that equation. So I'll simply take that number, I'll go to my calculator and say 100-, and I'll paste in that number, and I get 48.387, et cetera.
I'll copy out that value and set the header-title to have a width of that percentage. I'll save that, reload the page one last time, and now when we resize the window again, you'll see that the title and tagline align to keep within its space, while the menu aligns to keep within its space. As you can see, working with responsive layouts is challenging because you now have to work with percentages, and you also have to have an intricate understanding of how CSS works and the different quirks CSS has to offer.
The good thing is, once you know the tricks, like this using a negative margin to assign space for certain content, you're able to create layouts the way you want them to, without too much hassle. We'll be using this same technique further into the course to handle the general content.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.