Join Morten Rand-Hendriksen for an in-depth discussion in this video Understanding best practices for media queries, part of WordPress: Building Responsive Themes.
- View Offline
Media queries can be placed anywhere in a CSS document, or even in a separate CSS document.…The question is where to place them.…I'll give you some general ideas of different approaches and then you can fit…those approaches to your situation.…The most obvious place to put a media query would be right next to the…actual style itself.…So for example, if we want to change the background color of the…pre-header in a certain size of window and nothing else, we might place the…media query directly after the style that creates this background to begin with.…
So, I could place it right here.…Here is a media query that is placed directly after the pre-header, and then all…I have to do is create a new style. So, I'll grab the name of the original style,…and paste it in, and I'll close my bracket, and then I just have to put in the…extra code I need to change the background. So I'll say background: red.…When I save that and load my page and then resize the page,…you will see that when we get to that point, I am changing the background color.…
- 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