Join Morten Rand-Hendriksen for an in-depth discussion in this video Making a responsive single-post layout, part of WordPress: Building Responsive Themes.
- View Offline
Now that we have a responsive header, it's time to move on to creating responsive layouts …for our content, and we'll start with the single post. …If I go to a single post, you see that we have the layout that's based on the small screens. …We have the title and meta information on top and then we have the content underneath. …But on this large screen, that doesn't look very good, because we have way too much space …for these lines of text. …And when you get text that is above a certain number of words per line, it becomes very hard to read.…
That's the reason why, in the original design, I created this layout with the header and …meta content on the left and the main content on the right. …So, what we are going to do now is use that same technique we used to create that responsive …header to change the layout of this main content area to make it flow the way it's supposed to. …So we'll use that same math formula I showed earlier to find the correct percentages so …that we can lay this out. …
- 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