Need help? Check out our Support site, then


increase the width of the layout

  1. ottaviagambardella
    Member

    I use the Twenty Eleven theme and I would like to increase the width of my sidebar, (Increasing the overall width of the site). Please how can I do it? Thanks for any help.

  2. It's important to note that you have selected the "content on right" layout option for your Twenty Eleven theme. Because of that, you should use ".left-sidebar" in front of selectors that are specific to that layout.

    The column width in Twenty Eleven are percentage based. Here is an example showing how you can adjust the percentages to increase the width of the left sidebar and decrease the width of the content area:

    .left-sidebar #primary {
    	float: right;
    	margin: 0 7.6% 0 0;
    	width: 48.4%;
    }
    .left-sidebar #content {
    	margin: 0;
    	width: 100%;
    }
    .left-sidebar #secondary {
    	width: 28.8%;
    }

    This example will adjust the entire width which is originally 1000px, and I increase it by 200px to 1200px:

    #page {
    	max-width: 1200px;
    }

    You can adjust the values in these examples as needed.

  3. ottaviagambardella
    Member

    Thank you very much!
    I still have one problem:

    the width of the post area on the single post page is smaller than the width of the post area in the main blog page (I previously modified the width of the entire homepage and of the two parts (left sidebar and post area) with CSS).
    I would like to increase the width of the post area on the single post page (the page that opens up when you click on the post title in the home page). How can I do it? Do you know which CSS code I should use?

    Thank you for any help

  4. You can use .singular to target single posts. Here is an example that will set the width for the #primary container back to 100% and then adjust the margins for the #content container from 7.6% originally in the theme to 4%:

    .singular.left-sidebar #primary {
    	margin: 0;
    	width: 100%;
    }
    .singular.left-sidebar #content {
    	margin: 0 4%;
    }

    Adjust the values in the CSS as needed.

  5. ottaviagambardella
    Member

    I did it!!! Thank you very much!

  6. Excellent!

Topic Closed

This topic has been closed to new replies.

About this Topic