increase the width of the layout

  • Author
    Posts
  • #1214514

    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.

    #1214837

    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.

    #1214854

    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

    #1214855

    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.

    #1214856

    I did it!!! Thank you very much!

    #1214857

    Excellent!

The topic ‘increase the width of the layout’ is closed to new replies.