WordPress Twenty Eleven CSS Width

Twenty Eleven WordPress theme is another popular free theme which was released by WordPress team. We can adjust the screen by change css file.

Here is a requirement about adjust width, for example, we need to increase the width of right sidebar (include Widget width), and decrease the distance between content and right side widget, also, decrease the left margin of content, and right margin of widgets. also, if we will, we can increase the width of content.

Note: when we change the theme for WordPress, we normally create child theme, so that you do not have to change original theme, and so that if the theme updated, you do not need to modify theme again (of course, if you find the theme updated too much, you might have to change your child theme based on the new updated)

About the width of Twenty Eleven theme. we look at the following CSS scripts:

#primary {
    float: left;
    margin: 0 -26.4% 0 0;
    width: 100%;
}
#content {
    margin: 0 34% 0 7.6%;
    width: 58.4%;
}
#secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
}

(the margin values order is Top, Right, Bottom, Left)

Here we provides a picture to indicates above CSS scripts:image

Now you should understand what you need to do if you want to adjust any parts from content to secondary.

We have the following example:

#primary {
    float: left;
    margin: 0 -29.4% 0 0;  /* 0 -26.4% 0 0; */
    width: 100%;
}
#content {
    margin: 0 33.4% 0 6.6%; /* 0 34% 0 7.6%; */
    width: 60%;   /* 58.4%; */
}
#secondary {
    float: right;
    margin-right: 6.6%;  /* 7.6%; */
    width: 22.8%;  /* 18.8%;  */
}

Note: Above sample we reduced the gap between Content and Secondary from 7.6% to 4% (33.4% – 22.8% – 6.6%), and, we increased the right sidebar width to 22.8%, increased the width of content to 60%.