One of the things that bugged me since the first time I saw Twenty Eleven, is it’s lack of a sidebar on single post pages. To work around that, I tried to add the footer sidebar to the side of the single column layout. That wasn’t too hard, with a few easy CSS overrides (that even work on WordPress.com blogs, with the Custom CSS Upgrade):
.one-column #page {
max-width:971px;
}
#primary {
max-width:690px;
}
#supplementary {
max-width:230px;
border-top:0;
position:absolute;
top:220px;
left:830px;
}
#supplementary.two .widget-area,#supplementary.one .widget-area {
float:none;
width:100%;
}
Problem with this idea is that this will break the responsive design. This code should only be applied on the full size version of the theme. On any smaller screens, the footer sidebar should be shown below the content. Because my CSS uses absolute positioning, there is no way this will scale well. We need a media query here.
It would work if we would wrap the CSS code in a media query like this one:
@media (max-width > 800px ) { /* CSS GOES HERE */ }
Unfortunately, WordPress.com strips out specific CSS3 properties and characters.
Until WordPress.com supports media queries (and with that, other CSS3 goodies) we can’t fix this in a way that scales well. In case you want to attempt this, give the WordPress.com Custom CSS plugin a try. It is very close to the code they use at WordPress.com.
