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.
At this point, I can pretty much guess what's going to happen. You are going to take your new media queries in your new theme, upload them to your server, open the site on your phone, and notice that nothing happens. Well, that's because we haven't quite gotten to the point where our media queries interact with the phone yet. And that is because cell phones lie. That's the reality. They lie to the browser and to the web sites about what they are. A cell phone browser pretends to be a desktop browser, and unless you explicitly ask the cell phone browser, hey! How big is your screen? the web site will have no idea how big that screen is and it will assume that this is a desktop.
As a result, you will see the full-width content. So what we need to do is make our web site ask the device how big the screen is. Fortunately. It's very easy to do that. All we need to do is go into our theme, open the header.php file, and add one line of code. So I'll go and add it right here on top of title. I'll put in a comment to see what it is for later, and then I'll put in a new meta tag. So I'll say
So this will now track the viewport, which is basically the screen, and then the content of this meta tag will be the device width, along with some other information. So we'll say content="width=device-width". I'll close the meta tag, and what happens now is this page will ask the device hey! What's your width? And then we will set the default width to that width, which means we now know how big the screen is, so that if the screen is smaller than 720 pixels, the correct media query will kick in.
But there's one more thing we have to do. The problem with these cell phone browsers is, like I said, that they lie, and that means that we have to be extra careful about how they behave. You know how when you go to a web site, the cell phone browser has a tendency to try to zoom in on things? Well, you need to avoid that when you are using media queries because you've already accounted for the zooming in your media queries. So in addition to finding out the width of the device, we also want to tell it explicitly, do not scale my content. I know how to do it myself.
So next to width=device-width, we are going to say comma, and then we are going to say initial-scale=1.0. That just means the initial scale of zooming is going to be a one-to-one ratio. So instead of seeing the site zoom all the way out, we are just going to see the site as it is supposed to be. And then we are also going to say maximum-scale=1.0. That way the phone will never try to scale anything up and finally, we are going to say user-scalable=no. Pretty self-explanatory.
We are not letting the user use pinch and zoom to scale in and out. Now the meta tag is complete, and the cell phone can no longer lie to our web site about what it is, which means all our media queries will work. If you don't want to type this out, you can go to the code_snippets and you'll find that exact code right here. So you can just copy it from the code_ snippets file and paste it in if you want to. If you upload this new header.php file to your web server and then access your web site using your cell phone or tablet, you will see that now the media queries kick in the way they're supposed to and the site looks the way you want it to.
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.