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.
jQuery Masonry is now hooked into the front page, working properly, and we have this nice Masonry front page on our site. When all this is done, we need to make sure this layout looks good on all the devices and all screen sizes, and that includes the very smalles screen size, that vertical phone. If you remember back to when we made the media queries, when we scaled this window down to a smaller size, so equivalent to that small phone, we have a 20-pixel padding on the left and it 20-pixel padding on the right.
The problem is the box here in the Masonry layouts is 300 pixels wide, meaning the total width here is 340 pixels, whereas the phone's screen size is 320 pixels. What we need to do is reduce this padding for just this smaller size so that when people use their phones and hold them vertically, they'll get 320 pixels across exactly. What we need is a new media query targeting just this situation.
To add the new media query, we'll go to our style.css file, scroll all the way to the bottom, and if you want to, you can go and grab the media query from earlier, for instance this one. Copy it out, and we paste it in here, and then we make the conditional statement max-width: 3 20px. Then it'll only affect smart phones held vertically or really narrow windows on a computer. Now all we've to do is find those values that we want to affect and then paste them in here.
Now if you look at our original media queries, you'll see that there's a bunch of CSS selectors when we set the left or right values to 20 pixels. You see it here and here and here and here and so on. So what we're going to do is take the same selectors, copy them into a new media query, and then reduce that width the 10 pixels. Just to make it easier for you, I've made a code_snippet that just does that. So you just have go in to the code_snippet file and find that media query, copy it out, scroll to the bottom of style.css, and paste it in.
When you save this new media query and go back to your browser and reload the page and then reduce the page down to that same width again, you'll see that right when we hit that 320 mark, the new media query kicks in, and we get this nice 10-pixel padding on the left and right. And it also realigns the header in the menu and the footer and so on. You can see here, it keeps popping in and out between 10 and 20.
So what we're doing here is using media queries one last time to refine the look for just one particular usage scenario.
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.