59 | Sidebar on the Left – Twenty Twelve


A quick fix to move the sidebar location in a child theme of Twenty Twelve;

add these styles to style.css of the child theme:

@import url('../twentytwelve/style.css');

/*-- move sidebar to the left --*/
@media screen and (min-width: 600px) {
	.site-content {
		float: right;
	.widget-area {
		float: left;

/* for IE8 and IE7 ----------------*/
.ie .site-content {
	float: right;
.ie .widget-area {
	float: left;

caveat: this simplified set of styles has some problems with the formatting of the widgets in the ‘front-page’ template, when viewed in older browsers such as IE7.

possible helpful styles:

.ie .template-front-page #secondary.widget-area { width: 100%; }
.ie .template-front-page #secondary.widget-area .first.front-widgets { width: 50.1%; margin-right: 3%; background: #f4f4f4; }
.ie .template-front-page #secondary.widget-area .second.front-widgets { width: 46.8%; margin-right: 0; background: #f4f4f4; }
.ie .template-front-page #secondary.widget-area .widget { width: 100%; }
This entry was posted in Tips & Tricks, Twenty Twelve, WordPress and tagged , , , , . Bookmark the permalink.

11 Responses to Sidebar on the Left – Twenty Twelve

  1. Patricia comments:

    This is SUPERB! and works wonderfully. Thanks for your time.
    I did have one comment/concern though. I noticed there is now a great amount of white space between the sidebar widget area and the content. I believe this is due to some padding, margin, or maybe the width of the sidebar/content… Do you think you have any design tips or advice to balance this?

    • Michael (aka alchymyth) replies:

      this is the same amount of space as would be when the sidebar is in its original right position – just more obvious.
      you could try to use one of the browser ‘right-click’ – ‘inspect element’ tools to check that.

      or, for general support with WordPress.org problems or questions, consider to join the WordPress support forum – see you there.

  2. cogmios comments:

    Hello, thanks for your post on moving the sidebar tot the left of this theme.

    Do you think this is the complete set of changes needed considering the responsive design? E.g. applying only these changes will mean that at very small screens the content will remain at a bigger width and aligns to the right hand side. The menu might also lose its styling.

    • cogmios replies:

      ah forget it, you added the min width 600, i skipped that in my too fast reading of the posting, excuses.

  3. onenonly comments:

    Alelooyah. Thanks a lot! I have spent two days trying to fix widget area position in 20twelve. This is the most simple and most effective way how to do it. Definitely. Thanks once more!

  4. Vladoosho comments:

    Thank you very much. It is the simplest workaround i’ve ever seen so far. It’s working flawlessly. Thumb up 🙂

  5. Clara comments:

    I’ve just add your code into style.css but it doesn’t work for me. This is the URL: http://desarrollowebyclara.com/demo/ What can I do? Thanks so much!

    • alchymyth replies:

      Hi Clara,
      generally, the code is meant for a child theme’s style.css, and you don’t work with a child theme.
      you need to be specific where you add the new styles – don’t ignore the @media query.
      also, remember to clear the browser cache after any changes to the styles, if you want to see the changed formatting immediately.
      consider to join the WordPress.org support forum which is a good place to ask any questions when you have problems with customisations.

  6. Lorraine Syratt comments:

    So easy. Thanks so much.

  7. Trev comments:

    any idea how to make posts appear just as an excerpt on home page and category pages

Leave a Reply to Clara Cancel 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.