p2-responsive
p2-responsive copied to clipboard
Responsive and fluid child theme for P2
Responsive P2

A fluid and responsive child theme for P2.
I've tried to do as much as possible with CSS but there are a few things that had to be moved around in the markup, plus a bit of JS magic:
comments.phprename the comments function so it could be modified:p2_responsive_commentsplace span.actions at the end of comments so it responds nicely.
entry.phpagain, move span.actions to afterthe_contentso it responds nicelyfooter.phpnothing major here, just moving the sidebar so it flows under posts/content when we switch to single column layout on small screens.functions.phpadds a few functions we need to make it responsive.header.phpremove the sidebar and put it in the footer and also add a mobile viewport on line 14img/responsive-bg.pnga responsive faux column for the sidebarjs/jquery.fitvids.jsEmbedded videos maintain aspect ratio when resizedjs/modernizr.min.jspolyfill for HTML5 elements and media queriesstyle.cssAll our responsive goodness lives here. Unfortunately it's quite messy CSS, hopefully it can be made much neater when it's merged with the parent theme.
Demo
See the theme in action p2.nmecdesign.com
To-do
- Test on more mobile devices
- Test on old browsers (boo, IE)
- Integrate with parent theme
- Tidy and optimise CSS