45 | Twenty Eleven – Sidebar and Other Adaptations for Hand-held Devices


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.

This entry was posted in Easy Coding for Wordpress, Tips & Tricks, Twenty Eleven, WordPress and tagged , , , , . Bookmark the permalink.

31 Responses to Twenty Eleven – Sidebar and Other Adaptations for Hand-held Devices

  1. Himadri comments:

    Well! You have written your solution and this is cool , no doubt! I have also my own solution.I have written one post regarding how to increase the width of Right sidebar in Twenty Eleven Theme. The post title is How to Change the Width of Right Sidebar for Twenty Eleven Theme?.I have also provided the code.You will be able to change the width of the right sidebar easily.

    • alchymyth replies:

      Thanks; I saw your post in the WordPress.org support forum.
      is the posted css only for the right sidebar with the theme options ‘content on left’?
      does it have side effects for the ‘one-column’ option?
      are there other css codes for left sidebars?

  2. Steven Warner comments:

    This code works great for keeping the side bar text and images in line. However, the navigation bar stacks up after the third page link. I’ve been working on this all day and am completely at a loss, as what else to try to adjust. Changing the width from 100% to a value keeps the nav bar on one line, but of course then the rest of the page gets thrown off. I’ve been restyling the CSS, mostly for #access. Is there a change that would work in the wonderful Responsive structure you have presented here? Any help would be most appreciated. Thanks!

    • alchymyth replies:

      might be caused by the padding in ths style:

      #branding .only-search + #access div {
      padding-right: 205px;

      possibly ask at the WordPress support forum, or contact me with more details – see email in the sidebar.

  3. rangitoto comments:

    Great this works perfect!

  4. wacek comments:

    It works on my iPhone and iPad after first time copy/paste.

  5. sarah comments:

    Thanks for this. It worked easily and perfectly the first time.

  6. Lu comments:

    you are a life savior.
    thanks a lot and cheers from brazil.

  7. Jan comments:


    code is working great for all my browsers (chrome, safaria, firefox)…

    ….however my main goal of getting the sidebar NOT TO MOVE to bottom on my IPHONE and IPAD could not (YET!?!) be reached…:-(

    I m using twenty eleven theme with a child theme “three menus” from “Digital Raindrops” (http://digitalraindrops.net/2011/09/twenty-eleven-three-menus/).

    Added the code to the child-theme style.css….although I generally make changes to the child-theme custom-style.css….but pasted in there it didnt have an effect.

    I am feeling like being on the right track as the code DOES WORK in all my browsers….

    ….but I dont understand WHY it DOES NOT work on ipad/iphone! 🙁

    Any clues???

    Any help appreciated!


  8. Paul Scott Anderson comments:

    I added the code to the end of the css stylesheet, but for some reason the right sidebar is severely truncated when viewed on both my iPhone and iPad. Not sure what I’m doing wrong?

    I’m also wondering why this is added to the end of the stylesheet, when the “responsive structure” is already contained in it? I’m using Twenty Eleven 1.3.



    • alchymyth replies:

      Hi Paul,
      not sure what is wrong without seeing your site. Generally, the styles were given just as a starting point of investigating the effects of the responsive structure on small screens, and are meant to be used within a child theme of Twenty Eleven.
      If you would like somebody to look into your problem, consider joining the (free) WordPress support forum and posting your question there.

  9. André Kollen comments:

    Thanks very much. You were of great help.
    One problem still remains: The dropdown button of the category archive post is too long and running of the page.
    Do you know where to alter those settings?

    Many thanks in advance for your reply.


  10. vidya comments:

    Thanks for the css style- it fixed the side bar problem in IPAD display. But I still have css styling issues with other pages where I have used page.php & single.php templates. On the single post page, text overflows in the content area .On the About page , where I have created mypage.php template ( Copied from page.php of 2011 theme to my child theme), the About us content area extends out to the right beyond the page. the website is http://www.thefoodfile.net.

    • alchymyth replies:

      your problems are possibly at least partly caused by the way you have integrated the sidebar into the single posts and pages; also, my article does not claim to cover all situations – it is just a starting point to explore what the styles might do on narrow screens.
      if you would like more people to check your problem, consider joining and posting at the wordpress.org/support forum.

  11. mark shirley comments:

    Does anyone know how to stop the wordpress menu from returning on to another line on IOS phones. I’ve looked online and cant find an answer to this any help much appreciated.

  12. Vlad comments:


    Please share your solution or css on how you did it in IPHONE.


  13. Rick comments:

    Thanks, you guys rock. I had problems with the view on iphones and with a little change on the above css it works.
    Thanks again!

  14. Heather comments:

    Thanks so much for this. Just added the code to my style.css and my blog on my iPad now shows the sidebars. One question, though, is there anyway to center the blog on the iPad? It now skews off to the left side and has too much blank space beyond the sidebars on the right. Thanks for any feedback. Appreciate your help.

    • alchymyth replies:

      the space possibly comes from the left and right padding in:
      body {
      padding: 0 2em;

      try and add:
      body {
      padding: 0;

      to the ‘Responsive Structure for narrow screens’ styles (untested).

      • Heather replies:

        One more question… when I click on comments, the blog text bleeds into the sidebar and it becomes a mess. Any way to stop that bleeding? It only happens when I click on the bubble to go into comments. Again, thank you for your time.

      • alchymyth replies:

        Hi Heather,

        when I click on comments, the blog text bleeds into the sidebar and it becomes a mess

        the styles in that post do not take care of any thinkable situation – they are more a pointer to what is possible with Twenty Eleven.
        either try to use a web tool such as firefox web developer add-on to find the css selecotrs for the comment problem; or
        you could consider to take your question to the wordpress.org support forum.

  15. niraj comments:

    Ok this code helps for sidebar which is good, but my menu is long it comes down which looks ugly on my iphone.
    do you have solution for that?

  16. Arnold comments:

    Thank you for the css fixes! 🙂

    The only issue that I see is that the background is only displaying on the right and bottom areas of the screen. (Tested in iPhone 4)

    So, it makes the site look ‘off’ a bit. How would you tweak this to show an even amount of background space (albeit a little bit) on each side of the site layout?

  17. Paul Scott Anderson comments:

    I was having the same problem with my Twenty Eleven theme and found this help page… with a little extra tweaking, my blogs now look good, and the way I wanted, on both my iPhone and iPad. Thanks! 🙂

  18. Jeff Mulvihill, Jr. comments:

    Thank you! I just switched over to Twenty Eleven… and pulled it up on the iPad last night… AAAHHHHH! NO Sidebar…

    Your code fixed it!


Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


This site uses Akismet to reduce spam. Learn how your comment data is processed.