How To Change/Increase The Width Of Your Blogs Template

In this post, I will show you how can you change the width of your blog by making some changes in your template. If you are using blogger default template then you have option to directly increase or decrease the width of the template. This tutorial for those who are using a third-party template.

A complete layout can be divided into four section Header, Post Section, Sidebar and Footer.

Change the width of your blogs template

To change your templates width, first you have to edit the template in HTML form.
Now according to each section you have to find the following codes:

1.  #header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

This is to change the width of 'Header' part. To increase or decrease just change the width value as given in the above code.

2. #main-wrapper {

width: 410px;
float: $startSide;

This is to change the width of your 'Post Section'. To increase or decrease the width just change the value of width.

3.  #sidebar-wrapper {

width: 220px; float: $endSide;

This is to change the width of your blogs 'Sidebar'. To increase or decrease, just change the width value as given in the above code.

4. #footer {

width:660px;
clear:both;

As understood, this is to change the width of your blogs 'Footer'. Change the width value according to your need.

5. #outer-wrapper {

width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

You have to find this code to adjust the Main section of your template according to the width of above 4 parts. The Main section includes all above 4 parts. So its width is equal to 'Post section' + 'Sidebar' + margin. 

You can see from above examples 

Width of Main section = 660px

                                  = Width of Header

                                  = Width of Footer

                                  = Width of Post section + Width of Sidebar + 20px of margin

Now if you wants to increase your 'Post section' by 20px then, 

1. increase 'Post section' width by 20px

2. increase 'Main section' width by 20px 

3. increase 'Header' by 20px

4. increase 'Footer' by 20px

You can skip 3 and 4 but for symmetry in your blog, do that also.

I hope this tutorial helped you in changing the width of different sections in your blogs template. Feel free to comment below. Your comment makes me happy.