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.
Now the menu is responsive and it lays out nicely for all screen sizes using media queries, but it's still not quite the same as the design. In particular, the menu isn't aligning quite the way I originally intended. If you look at the menu here, you see that although it stays on the right-hand side of the screen, it's still shifted to the left of the container, because container ends right here and that's where the menu is shifted. In the design, I wanted the menu to shift all the way to the right.
To figure out how to fix this, I'm going to use the Developer tools in Chrome to identify the styles that are affecting the menu. And you'll see here there are quite a few containers that handle the menu. The top container is this one, id- access, and if I select it, you'll see that it says display: block and margin-top 10px. So what happens if I float the menu to the right? I'll simply add that here, float: right. And you see that now the menu floats to the right, almost, because there's still space here, which means there's something else that's creating a space.
And just looking at how the menu behaves, I can tell that there's probably a margin here somewhere. So, I'll right-click on one of the elements, and you see the margin is not in the anchor element, so it must be in the list element. And here it is. You see it says, float: left, which is what floats menu so that it become a horizontal menu rather than a vertical menu. You can see if I turn it off, it becomes a vertical menu. And then it says margin: top 0, right 2em, bottom 0, left 0.
So what I want to do is take that 2em and place it out at the end so that it becomes top 0, right 0, bottom 0, left 2ems. And now you see the menu stacks the way it's supposed to, which means I can implement those two styles in my style sheet. So I go to my style sheet, I'll find access, then here I will first float access to the right. And then I have to find access li and change it so that it says 0, 0, 0, 2em. Save that, reload the page, and now we have the menu layout we want--almost, because, if I resize this window now, you'll see that when the media query kicks in, the menu is still flowing to the right, and that looks weird.
It should be floating to the left at this point. So all we need to do is reset the menu styling in the media query. Now, remember what I changed here. I set access to float right, and in access li, I changed the margin. So logically what I need to do is go down to my media queries and here, I'll set access to float: none, and then I'll set access li margin: 0 2em 0 0.
So I'm basically setting everything back to the way it was before. Now I save this and reload the page. You'll see the menu aligns to the left when the media query has kicked in and when we scroll out, it aligns again to the right.
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.