Widen your blog width

Are you kinda sick of the width of your blog? It can only hold that wide pics (usually 220px for sidebar). In this tutorial we'll learn how to make more space on your blog so that your pics stays in. NOTE: this tutorial is intended for those who use the default templates, if you use custom template then this tutorial is most likely not applicable.

Ok, so our 1^st step is to open the Dashboard > Layout and choose the 'Edit html' tab. In the code, find the line:

#main-wrapper {
width: 474px;
margin: 15px;

This is taken from the Denim template, your's may have a slightly different code, depending on the template.

Now see there the width is (in my case) 474px, and I can't put any pic or videos that are wider than 474px. So how do we change it? Simple just change the width values to whatever size you want it to be. In my example I'll change it to 500 px.

#main-wrapper {
width: 500px;
margin: 15px;

Don't forget there's a semicolon at the end of px. Simple right? The code above changes the width of your blog posts, not the sidebar. If you want to change the sidebar width, then look for the following code:

#sidebar-wrapper {
width: 240px;
word-wrap: break-word;
overflow: hidden;

And change the width value to whatever width you wish. Ok, after you are done, Save the template.

Now after you finished editing your posts and sidebar width then it's time to edit the outer-wrapper. You'll need this to have the same width as the total of your post and sidebar. So go back in the edit html and find either:

#content-wrapper {
width: 985px;
margin: 0 auto;
padding: 0 0 15px;

OR

#outer-wrapper {
width: 985px;
margin: 0 auto;
padding: 0 0 15px;

And change the width by as much you change the sidebar or posts. Here's a practical way to do that. Say I've change the posts width by 35px, and the sidebar width by 20px, that means a total of 55px. My current outer-wrapper (or content-wrapper) width is 985px, so I must change it to 1040px (that is, 985 + 55). Save your template. You are done for this part.

Now if you got your header misaligned, you must change the width as you change the outer-wrapper. Find the code:

#header {
width: 985px;
margin: 0 auto;

And change the width by the same amount you change the outer-wrapper. Hit the Save button for the last time and you are done! Now you have a wider blog to hold all your pics. But if the width still doesn't fit you, go back to editing html until you find the perfect width. Keep experimenting!