How to Make your Entire Blog full width in Blogger

I just got a couple of E-mails recently from people asking me how they can increase their blog width. It was after that I then recalled when I was starting some years back that I use blogger simple blogger template, I noticed that it was not set to full screen, as I had blank spaces on the sidebars of my blog. I tried to change it myself, but my knowledge of coding was close to 0.

I didn't have any option to increase my entire blog width, So i had to change the template. I never know that all I had to do then was just a little editing on the HTML code to achieve what I wanted.

Increasing the Width of your Blogger Template

All we will have to do here is to edit the code of your template till we get our desired result.

1. First, we need to go to your Blogger Dashboard > Theme > Edit HTML

Then use CTRL+F to search for the following code

<b:skin> ... </b:skin>

2. In between <b:skin> and </b:skin> search for body, it’s one of the first codes. You’ll see code similar to

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

Change the 

padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);

 to

padding: 0px;

3. Search for .content-inner. This is the section that wraps your header, navigations, posts, sidebar and footer. Search for it, skipping the variable section and find something that looks like

.content-inner { padding: $(content.padding) $(content.padding.horizontal); }

This is the code we talked about earlier. The $(content.padding) is defaulted to 10px and $(content.padding.horizontal) is 40px as set in the variable section. We want to remove this 40px padding that’s on either side of our content so that the header won’t have spaces. Change it to look like

.content-inner { padding: $(content.padding) 0px; }

or if you prefer

.content-inner { padding: 10px 0px; }

4. Now look for the section of your template below </b:skin> that looks like

<b:template-skin> ... </b:template-skin>

5. In between <b:template-skin> and </b:template-skin> search for .content-outer, .content-fauxcolumn-outer, .region-inner and find something similar to

.content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: $(content.width);
        max-width: $(content.width);
        _width: $(content.width);
      }

Change

max-width: $(content.width);

to

max-width: 100%;

this will change our blog width to be the full size of the browser.

6. Find

]]> </b:template-skin>

and add the follow code above it to change the main content area (posts + sidebar) your blog width and centred.

.main-outer { max-width: $(content.width);  margin: 0 auto; }

or

.main-outer { max-width: 1000px;  margin: 0 auto; }

7. Again find </b:skin> and add the following above it

.tabs-inner { padding: 0px; } .section { margin: 0px; } .header-inner .widget {margin: 0px; }

8. Save the template and visit your blog, you will noticed that will would be set to full screen on any browser and device. This has been tested on blogger themes like "simple template" and it worked perfectly.

Hope i was helpful and i solved your problem. Feel free to ask me anything in the comment section.