Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
In the previous movie we made a small change to the style sheet of the theme to make the frame responsive, and we then added a breakpoint so that as the window gets smaller than the predefined original size, the layout changes to a smaller size overall. Now we need to add additional media queries to deal with the content once the window gets smaller than this breakpoint. If I reduce the width of this window even more, you'll see that the margins, these large areas above and to the side of the content, are starting to take up a proportionally large amount of space in the layout. And if I go to my original designs, you'll see that whereas on screens we have a lot of space and the margins, on the small screens we've very little margins.
And that's simply because I want to create as much space as possible for the content. So what we need to do now is figure out what styles we need to address to change these margins to become smaller so we have more space for our content. The first thing I'm going to do is create another media query, because the first media query we made addresses all the content that's between 720 pixels and 1039 pixels wide. So what I'm going to do is create another media query for screens that addresses any screen that is below 720 pixels wide.
So I'll say max-width : 719 pixels. That way this query will kick in once we're below 720 pixels. I'll with an end bracket, and then we can add our new styles inside this query. Now we need to figure out what styles we're going to change. So I'll go back to my site and then use the Google Webmaster tools to select the elements I think we'll need to change. I'm looking at the pre-header, and I'm seeing that there's a lot of extra space here on the sides, so there's must be a margin set somewhere.
So I'll select it, and I can see that there's a margin there. And when I go down here to my tool, I see that the I pre-header padding is set to zero pixels for top and bottom and 50 pixels for left and right. So I need to change that. I'll go into media query, say #pre-header, and then I'll set it to #pre-header, and I'll set its padding to 0 pixels for top and bottom and 20 pixels for left and right.
Close my new style, save the stylesheet, reload the page, and now you see we have a 20-pixel padding instead. If I hover over the element, you see the green areas on the left and on the right, but you also see that this search box still floating in. So that means there's something else going on with the search box. So I'll select the search box this time and then move up to the highest containing element and here I find that it's set to right 50 pixels. So again, I'm going to grab the style, header-search, and then I'll change the value--in this case right : 50px-- so I'll change that to right : 20px, close my style, save the style sheet, reload the page, and now the search box also shifted in properly.
Before I finish with the pre-header, I want to see what happens if I make the screen even smaller. If I make the screen smaller, you'll see at some point the search bar covers the social links and the search word actually disappears altogether. So what I need to do now, before moving on, is reduce the overall width of the search bar. So I'll select the search bar again, and here I see #header-search #searchform input# and then a width of 275 pixels. So if I go in here and experiment and change it to 175, I see that it now seems to work much better.
So what I need to do is copy out the style, add it to by media query, save it, reload the page again, and now you see that as we scale up and down, the pre-header changes to fit the new layout. Using the same method, by looking out the elements with the Inspector and then figuring out what styles are causing these elements to shift in and out, you can now reformat the style code so that the entire page will fit with the design.
Instead of forcing you to watch me as I identify each individual style and then make changes to them in my style sheet, I've created a code snippets document you can use to copy out the necessary styles for this media query. You'll find it in the exercise file. It's called code_snippets. If you scroll down here to 04.05, you'll find the entire media query. It starts with @media and goes down to END max -width : 719px. Simply copy it and replace this media query we just created, save it, and when you now reload the page again, you'll see that now all the content aligns with a 20-pixel margin instead of the previous 50 pixel margin.
And as we scale the window up, the 50-pixel margin appears once the screen is big enough to handle it.
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.