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.
When you start building a responsive theme the first thing you need to do is make sure the frame--so the outer edges of this entire site--is responsive so than when you resize the browser the content inside starts flowing instead of staying the same. As you can see from this demo, you'll see that currently, it does not flow. So this is not responsive frame. This also gives you a preview of the more in-depth media query tweaking we'll do for the rest of the course, and I'll also get a chance to show you how I used the Web Developer tools in Chrome to figure out what styles I need to tweak.
To make the frame responsive, we need to work with the style.css file that's found inside our theme. So I'll go to my WordPress installation on my computer, go to wp-content/themes, then Anaximander, and then find style.css down here at the bottom, and I'll open that in my code editor. If we go back to the browser, I'll do right- click on some of the content in my page and select Inspect element to open the Code Inspector. And from here I can highlight different sections of the page using the selector on the left to figure out what's going on in the styles.
And you can see right away that this id= wrapper is the one that contains all this content. And on the right here you can see width is set 1040 pixels, and this is what I need to change. I can experiment with this by simply editing it right inside the browser. So I'll edit it to max-width instead and see what happens. Now that I've set it to max-width, you'll notice that as I resize the frame, the content starts moving around.
That's because we're no longer working with a fixed width; we're working with a variable width that just has a max-width on it. So that's the first thing I need to do. I'll go in to my style sheet, find the wrapper style-- it's right here--and change width to max-width. Save it. I'll reload my page, just to make sure this worked, and when I resize it now, you'll see that content reformats. That's exactly what I want.
The next step is to create stepped stages. When I showed you the fully built-out version of Aximander, instead of having the whole site be flexible, we have predefined stepped regions that will pop in and become smaller. So what we need to do now is define those regions, and we're going to do that with media queries. So I'll go back into a stylesheet, scroll all the way to the bottom where I want to put the media queries, and then I'm going to put in some code. Now if you want to follow along, you can use the code_snippets found in exercise files.
So I'll open that on the side here, and you'll see right here at the top we have Media Queries Aplenty. So I'll take that and paste it in. This is just a comment so that I know what's going on. Then I'm going to make my first media query. So I'll say @media only screen, and then I'll set it to and (min-width : 720px) and (max-width : 1039px).
I'll just close my query and then you're going to ask, where do you get these values from? 720 pixels and 1039, that seem kind of random, right? Well, if we look at the site and I select anywhere inside here and use the Inspect element function, you'll see that if we go up to wrapper, you'll see that this wrapper is exactly 1040 pixels wide. So the reason I've picked 1039 pixels is because I want this is to trigger when the window is smaller than 140.
The reason why I set 720 is because the next step in the sequence will be exactly 720 pixels wide. So what I'm saying is if the screen is between 720 pixels and 1039 pixels then do the following queries. Now you'll remember we used the wrapper to control the size. So let's see what happens if I change this max-width from 1040 to 720px. Now, you see the width is much smaller, but the layout still okay, because we still have a sidebar on the right and the content on the left, and they have equal size.
That means this is a size I want. So what I need to do now is create a new wrapper style inside my media query that has a width of 720 pixels. So I'll go ahead and say wrapper width 720 pixels, and I'll close that style. I'll save the style sheet, go back to my browser and reload it, and now at full width, we see that 1040 width, and if I scale it down, exactly when we hit the 1040 mark, the page pops in to 720.
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.