Support » Themes and Templates » how to change width of twentyeleven theme?

  • Resolved ssmarni


    new user.

    the example site for the twentyeleven theme is nice and wide.

    when i installed it, it is much more narrow.

    when i search for how to change it i only see people complaining, but no fixes.

    please point me in the right direction.


Viewing 13 replies - 1 through 13 (of 13 total)
  • esmi


    Do not edit the Twenty Eleven theme. It is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues.

    For this reason, it is recommended that you consider creating a child theme for your customisations. Once your child theme is active, we should be able to help with the customisation.




    I assume this means that there is no way through the interface to make this change.

    This seems strange to me that the example site has been altered with code rather than just with the built in interface. This seems misleading unless it is clearly pointed out that the example is on how the product looks out of the box. It would be nice to point out the difference on the example page.

    Thank you for your response!




    This seems strange to me that the example site has been altered with code rather than just with the built in interface.

    what is ‘the built in interface’?
    most themes, including twenty eleven, don’t have theme options to change the width.

    twenty eleven will adapt to the available width of the browser window, with some margins, up to a max width of 1000px, set in style.css of the theme:

    #page {
    	margin: 2em auto;
    	max-width: 1000px;

    can you post a link to the example site for the twentyeleven theme; and a link to your site where twenty eleven is installed?



    The site I’m working on is here

    The template site that looks different is

    I had both sites open and they looked very different to me in terms of width. I was using chrome, ie and firefox. My site does look good on my g2 which is a plus.

    By the way, I understand about the child theme stuff and won’t mess with the base code.

    If you happen to know a link to and explanation of what the reinstall button within the theme actually does/changes send it my way.

    Thanks again for your responses!

    Dunno how much code you want to play around with. I have a series of tutorials going about adjusting twentyeleven.

    I change the width, mess with headers, all sorts of stuff. Maybe you’ll find the posts useful?



    the width of the one-column design is limited in style.css:

    /* One column */
    .one-column #page {
    	max-width: 690px;

    and the recent posts in the showcase template:

    .page-template-showcase-php section.recent-posts {
    	float: right;
    	margin: 0 0 0 31%;
    	width: 69%;

    it is still strongly recommemded that you create a child theme; otherwise any modifications will be overwritten with your next upgrade of your wordpress version.



    Thanks for your replies! I may brave changing the code with a child theme. Wish me luck!



    fyi i just wiped the site and re-installed wp, and now my site has the same width settings as the example site. i wonder what made it change. weird.

    this time around i’ll pay attention to it.



    Oh how annoying. It did it again. This time it was when I tried to embed a picasa album. I didn’t know this wasn’t supported. The slideshow actually shows up, but the layout is much more narrow. I just trashed the pages and posts, but the layout is still narrow. I need to find how to empty the trash again. Did it once.

    I did not try to do this with picasa before, so it must have been something else that caused the layout to change to a more narrow format.

    Alas, I will reinstall if I can’t get it back to the wider layout.

    FYI I was using a child theme, but reverted back to the original theme because it had a missing layout option.

    I can’t get a break with this right now 🙁

    The page templates were a partial solution for us:
    When we installed the Twenty Eleven theme, all pages went to the Default page template, much too narrow for our taste.

    We’re making a website so put the Showcase page template on the Home page – perfect width and design. That’s the one shown on the sample.

    We put the Sidebar page template on most of the other pages – good too as we’re using widgets in our sidebars.

    If you have alot of pages, it’s easy to edit the page template for many under All pages, selecting the pages, then Edit.

    Now I only have to edit the Default page template in my child theme css so it comes close to the other pages. Thanks for providing the CSS here!

    hi! i’m currently using the twenty eleven theme, it’s working great besides one thing. the posts on the homepage are really narrow compared to the page if my sidebar is on the left side, and when i switch so that the sidebar is on the right size the posts and the sidebar are overlapping….. 🙁

    i’ve tried to increase and decrease the width of the posts on the style css, but it won’t work… how can i fix this??

    this is the site i’m working on:

    Please post your own topic.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘how to change width of twentyeleven theme?’ is closed to new replies.