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.
Most WordPress themes come with sidebars. I've started designing WordPress themes without sidebars, but every now and again you need them. For that reason, the Anaximander theme has a sidebar on the default index page. The sidebar poses some new challenges when it comes to responsive layouts. Do you shrink the size of the sidebar by percentages or do you leave it a fixed width? And if so, what happens when the sidebar gets bigger than the main content? My philosophy here is to leave the sidebar a fixed width until its width is equal to that of the main content.
At that point, I either hide the sidebar or I shift it down below the rest of the content. If you look at how I laid out this page, you'll find something you may be surprised at. Instead of simply floating the content left and right, which is the common thing to do, I've decided to use a backwards version of the technique we used to create this responsive header and also the responsive single posts. If you look at this regular-index section, you'll see that here we have a margin on the right that's -320 pixels, and in regular- content, we have another margin of 320 pixels.
So basically, what's happening is we are shifting the content to the right and then shifting it back to the left, leaving a large space in which the sidebar can slide in. So you see that space in this orange area here. That means if we want the content to span across the page and the sidebar to shift below the page, we need to reset these two styles. But first we need to decide where we want that breakpoint to occur. If I resize my browser here, you'll see that at the second breakpoint, we pretty much have that situation I was talking about, where the content and the sidebar are of equal width.
That means I want to use that breakpoint as the breakpoint for moving the sidebar below the content. Knowing that, I'm going to go into my media queries and apply these specific styles. So I'll go to my style sheet, scroll all the way to the bottom, where I know my media query is. It's right here. It's the one for max-width : 719. Let's scroll to the bottom and here I'll create my new styles. So the first one was regular-index, and here I want to remove the float, so I'll float.
And then I also want to reset the margin to 0. Then I have to apply the same approach to the regular content container, so again, I'll say margin: 0. So just to reiterate, what we're doing here is finding regular-index, and here you see we're currently floating regular-index to the left and the margin on the right is -320, so we are resetting regular-index to float: none and margin: 0, and then we are also resetting regular-content's margin to 0.
I'll save this, reload this page in the browser, and you see the sidebar disappeared, and more importantly, when the window size increases, the sidebar reappears. But it didn't really disappear; the sidebar moved to the bottom of the page. So if I again make it disappear and scroll down, you'll see the sidebar is now here on the bottom. But you'll also see that the sidebar looks odd, because it's shifted to the right. What I have to do now is create new styles that affect the sidebar only in this situation so the sidebar looks nice when it's at the bottom of the page.
If you go to the code_snippets for this course, you'll find all that style code. It's not all that much, so you just copy it, go back to your media query, and paste it in. When you save this and reload the page, you'll see we have a new nice sidebar area down here at the bottom that's formatted to fit better with a layout for being on the bottom. And if we increase the size of the window, we're back to the regular sidebar. Before I wrap up, let's just take a quick look at what we just pasted in.
If I place my browser here on this side and we go down and take a look at the sidebar widgets, you'll see that the new sidebar widgets have a solid gray background, which you can find here, sidebar .widget, and the background is right here. They're also spanning across the entire width rather than floating to the right, and that's done here in the sidebar style. We set float to none, overflow to inherit, and then the width to 100%. You'll also notice that inside sidebar widget we now have width at inherit, which means this style is inheriting the width of the containing style, which is sidebar.
In other words, your sidebar widgets are now 100% wide instead of having a fixed width, as they did before. The rest of the styling is made to match the footer widget styling that you see on the bottom of the page here. Sidebars require special consideration when designing responsive themes. I personally don't like flexible sidebars, so I showed you how to leave them with a fixed width. You can use the same technique, but with percentages to make the sidebars flexible if you like. There's no right or wrong here, so it's completely up to you.
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.