Join Morten Rand-Hendriksen for an in-depth discussion in this video Adding media queries to the header, part of WordPress: Building Responsive Themes.
- View Offline
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.…
- 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