Join Morten Rand-Hendriksen for an in-depth discussion in this video Customizing media queries with the Chrome Developer Tools, part of WordPress: Building Responsive Themes.
- View Offline
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 …
- What is responsive design?
- Installing the Anaximander example theme
- Deciding what screen sizes to target
- Designing menus
- Adding responsive images and video
- Using CSS media queries to apply different styles
- Handling sidebars on mobile displays
- Dealing with footer widgets
- Installing jQuery Masonry