As the title says: how can you keep the sidebar on narrow screens such as the iPhone® or iPad® and set a minimum width for your site, using (a child theme of ) Twenty Eleven?
The solution lies in the responsive structure of the stylesheet.
This adaptation to the styles needs to be added at the end of style.css of (your child theme of) Twenty Eleven; some example styles, to set a lower limit to the page width, etc:
/* =Responsive Structure for narrow screens
* to keep min width and sidebar
-------------------------------------------- */
@media (max-width: 800px) {
#page {
min-width: 500px;
}
/* keep the sidebar - for right sidebar */
.right-sidebar #main #content {
margin: 0 29% 0 1%;
width: 70%;
}
.right-sidebar #main #secondary {
float: right;
margin: 0 1% 0 1%;
width: 24%;
}
/* keep the sidebar - for left sidebar */
.left-sidebar #main #content {
margin: 0 1% 0 29%;
width: 70%;
}
.left-sidebar #main #secondary {
float: right;
margin: 0 -1% 0 2%;
width: 24%;
}
/* correction for 'showcase' template */
.page-template-showcase-php #main #primary.showcase {
float: right;
margin: 0 2% 0 2%;
width: 96%;
}
.page-template-showcase-php #main #primary.showcase #content {
margin: 0 6% 0 6%;
width: 88%;
}
.page-template-showcase-php section.recent-posts {
float: right;
margin-right: 0pt;
margin-left: 31%;
width: 69%;
}
.page-template-showcase-php #main .widget-area {
float: left;
margin-right: -22.15%;
margin-left: 0pt;
width: 22.15%;
}
/* correction for singular posts/pages without sidebar */
.singular #main #content {
margin: 0 8% 0 8%;
width: 84%;
}
/* keep floating footer widgets side-by-side at this size */
#colophon #supplementary .widget-area {
float: left;
margin-right: 1%;
width: 32%;
}
}
/*to keep image alignment in narrow browsers*/
@media (max-width: 650px) {
.alignleft { float: left; }
.alignright { float: right; }
}
The whole css got a bit longer than expected to care for the ‘showcase’ template, and all possible layout options.
Adjust the ‘minimum width’ to fit the screen width of the targeted hand-held device.
If you are using it with an alredy customized child theme of Twenty ten, you may need to adjusts some of the values and/or add more styles.
Not actually widely tested with iPhone®, iPad® or any other tablet PCs – all feedback is very welcome.