Join Morten Rand-Hendriksen for an in-depth discussion in this video Hiding sidebars on mobile, part of WordPress: Building Responsive Themes.
- View Offline
One common solution to dealing with sidebars on mobile devices is to simply hide them if …the screen is too small. …I tend to agree with the strategy, as stacking the sidebar underneath the main content can …produce an awfully long page on a mobile phone, and you have to scroll a lot to get …to where you want to go. …But hiding content with media queries has a couple of unintended drawbacks. …First, let's take a look at how you would hide the sidebar. …In the previous movie, we used media queries to move the sidebar down to the bottom of …the page when the window is too small to fit it, …and we also added a bunch of extra styles to make the sidebar styling fit with the rest …of the page when the sidebar is at the bottom. You can see it …if you resize the window here. You will see the sidebar disappeared.…
When I scroll down, the sidebar now appears at the bottom. …But if you don't want to show the sidebar at all, and you want to hide it using media …queries, instead of adding all the extra styling, all you have to do is find the container--in …
- 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