The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

[resolved] [closed] how to change width of twentyeleven theme? (14 posts)

  1. ssmarni
    Posted 5 years ago #

    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.


  2. esmi
    Forum Moderator
    Posted 5 years ago #

    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.

  3. ssmarni
    Posted 5 years ago #


    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!


  4. Michael
    Forum Moderator
    Posted 5 years ago #

    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?

  5. ssmarni
    Posted 5 years ago #

    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!

  6. Rev. Voodoo
    Posted 5 years ago #


    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?

  7. Michael
    Forum Moderator
    Posted 5 years ago #

    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.

  8. ssmarni
    Posted 5 years ago #

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

  9. ssmarni
    Posted 5 years ago #

    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.

  10. ssmarni
    Posted 5 years ago #

    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 :(

  11. hjustice
    Posted 4 years ago #

    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!

  12. oklerks
    Posted 4 years ago #

    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:

  13. oklerks
    Posted 4 years ago #

  14. esmi
    Forum Moderator
    Posted 4 years ago #

    Please post your own topic.

Topic Closed

This topic has been closed to new replies.

About this Topic