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.

31 Replies to “Twenty Eleven – Sidebar and Other Adaptations for Hand-held Devices”

    1. 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?

  1. 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!

    1. 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.

  2. hi,

    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!

    Jan

  3. 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.

    Thanks,

    Paul

    1. 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.

  4. 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.

    A.K.

  5. 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.
    Thanks,
    vidya

    1. 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.

  6. 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.

  7. 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!

  8. 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.

    1. 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).

      1. 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.

      2. 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.

  9. 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?

      1. Dear Alchymist,
        i have encountered an issue on my blog and i need some help.

        as you can see with an ipad on http://powering-education.com/ the body of document seems to be smaller than header image.

        i have made many changes on style.css trying to resolve the problem but without succesfully.

        I will be very gratefully if you can help me with this.

        Regards
        iomioo

      2. Dear Alchymyth.

        Appreciate your quick answer. Now my blog looks amazing.
        Thanks again.

        wish you the best!

  10. 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?

  11. 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! 🙂

  12. 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!

    Thanks!

Leave a Reply to Himadri Cancel reply

Your email address will not be published. Required fields are marked *