Join Morten Rand-Hendriksen for an in-depth discussion in this video Making the sidebar responsive, part of WordPress: Building Responsive Themes.
- View Offline
Most WordPress themes come with sidebars. …I've started designing WordPress themes without sidebars, but every now and again you need them. …For that reason, the Anaximander theme has a sidebar on the default index page. …The sidebar poses some new challenges when it comes to responsive layouts. …Do you shrink the size of the sidebar by percentages or do you leave it a fixed width? …And if so, what happens when the sidebar gets bigger than the main content? …My philosophy here is to leave the sidebar a fixed width until its width is equal to …that of the main content.…
At that point, I either hide the sidebar or I shift it down below the rest of the content. …If you look at how I laid out this page, you'll find something you may be surprised at. …Instead of simply floating the content left and right, which is the common thing to do, …I've decided to use a backwards version of the technique we used to create this responsive …header and also the responsive single posts. …If you look at this regular-index section, you'll see that here we have a margin on the …
- 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