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.
We have now created a header that's responsive in that it resizes and realigns as we reduce the width of our window. However, if we make the window small enough, it starts looking really strange. That's because we've yet to add media queries to make sure that as we hit certain points in our layout, the menu will also respond to that point and change so that the layout is more useful. What we want to do here is create a situation where when the width of the window is small enough, the menu ceases to stay on the right, and instead moves in underneath the title.
That will make it more accessible, and we'll avoid this squishing effect that you see here. To do that, we need to add media queries. So let's figure out what we want to do first. In the previous movie, we used percentages to move the entire header container to the right and then shift the title and tagline to the left. So logic dictates that if we reset these values, we will end up with a situation where the title and tag line is on the top and the menu's on the bottom.
If you look at our style sheet, you'll see that here we have the header-container and the header-title styled inside the main style sheet. So if we simply copy these elements out and go all the way down to our media queries, we can add these styles in to the media query we want to. In this case we want the breakpoint to happen at 719 pixels. If you remember, that's the second breakpoint where the layout goes from being fixed, like this, to fluid, like this.
To reset the menu layout, I'm going to go in here to my media query and find a logical place to place it, so I'll place these styles directly after header_margin. I'll paste in the original styles first and just do some cleanup so that it looks nice. And then what I want to do is reset these values to default, or just 0. So I'll reset margin-left to 0 and this margin to 0 and I'll say float: none, and reset the width to 100%.
I'll save this and when I reload my page now, you'll see that the menu is underneath the title and tag line, and if I scale the window up, the menu appears on the right-hand side. So a simple media query was all that was needed to reset the layout back to what it was originally, which is what we wanted.
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.