Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
The many ways visitors access web sites, via mobile devices, tablets, and desktops, now requires sites to incorporate responsive design elements that adapt to different screen sizes and browsers. In this course, Morten Rand-Hendriksen demonstrates design strategies, best practices, and actual code examples for creating a responsive web site. The course covers layout, navigation, responsive video embedding, and content sliders. The final chapter shows how to create an index page with jQuery Masonry, a jQuery plugin that helps you create dynamic grid layouts.
So far, we've hooked jQuery Masonry into our WordPress theme; we've made it interact with the front page; but even so, this front page still doesn't look like that nice tiling effect that we want. That's because the last step in the process of adding masonry to your WordPress theme is to apply styling so that all the boxes are contained the way we want them to. If we look at the original design, and this is where drawing out your design in advance has a huge benefit.
If you draw your design in advance, you know exactly where you want to go with your styling, so it's just a matter of applying that styling to your style sheet. Looking at the original design, you can see exactly what we want to do. Each of the items should be contained in a box that's 298 pixels wide. That box should have a one-pixel border of gray color, and there should also be a margin between each of the boxes of 20 pixels.
Now that we know what it's going to look like, we can go into our markup and identify the elements that we want to apply styles to. So I'll use my Developer Tools to find out which element is containing each of my stories, and I can see it's this one, the article, and it has the class index-post-container. So that's what I want to apply my styles to. Now I can go into my style sheet, open it in the code editor, and then I'll create a new section for my new styles.
I'll place it right after the regular index section that we already have. So I'll copy this comment out and then scroll down until I find the end of that section. Here it is. And I'll say Index- Masonry and then I can create a new style. The first style should apply to only masonry-index and inside that .index-post-container so that this style will apply to each of the items.
Then it's just a matter of defining exactly what it's going to look like. As I showed you in Photoshop, the width of each item should be 298 pixels. Each item should have a border. It's 1 pixel wide, solid, and has a gray color, so I'll set it to e3e3e3. And we also want each item to float to the left, so I'll say float: left. Save the new style sheet, reload the page, and as if by magic, everything now stacks nicely, side by side and one on top of another.
But it doesn't look quite right yet. There's a couple of things we still need to do. First, we need to make some space in between each item. So what I need to do is, for each item, add a margin to the right and to the bottom, and I know that that margin should be 20 pixels. So I'll go back, say margin: 0 for top, 20 for right, 20 for the bottom, and 0 for left. Save it again, reload the page, and now they stack on top of one another with the correct spacing in between.
But there are two issues here. First, we now only have two items next to one another instead of three, and second, you see that the title here is shifted all the way to the left, which looks kind of odd. So let's deal with the title first. I'll take a look at the title with the Developer Tools and I see that it's affected by this index-title class. So now I can create a new style that affects only that. So I'll say masonry- index and then index-title.
That way this style will only affect the index- title in the masonry-index and not any other place the same index-title appears, like in the regular indexes. And then I'll set margin: to 20 pixels all around. Save it, reload the page, and now you can see the titles align with the rest of the content. But what are we going to do about the content not spanning all the way across here? And more importantly, why is it happening? Well, if we do some math here, you'll realize that the overall container here is 940 pixels wide, and each of these articles is 300 pixels wide once you add the 1-pixel border on either side.
You remember we set them to 298s and then added a border. The problem is, if you take 300 plus 20, plus 300 plus 20, plus 300 plus 20, you don't end up with 940; you end up with 960. The containing box is simply not big enough to contain all our content. There are several ways you can deal with this. The absolute easiest way of dealing with it is to simply make that outermost containing box too big.
So what we'll do is, go in, create a new style, say masonry-index--because that's the containing box--and I'll set the width to 105%. That extra 5% is just enough to allow us that extra space so that the content slides up next to it without disturbing the layout of the whole page. So now you see we have the correct layout for the masonry index, all the way down to the bottom, and if we navigate to the next page, we get more stories.
And just as importantly, if I go to an archive page, like Category archive page, I still have the same layout I had before, so Classic layout on archive pages, Masonry layout on index pages, and the Masonry layout is responsive.
There are currently no FAQs about WordPress: Building Responsive Themes.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.