Make blogspot content and image header fit any screen resolution

So, I need to adjust screen resolution of my blog. First, I need my blog content fits any screen resolution. Currently I use 24" inch monitor so it looks ugly on my own monitor.

My blog opened on smartphone with mobile view disable (m=0)

After some googling, I found this blog post can be implemented, just found the following lines on the blogger template.

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

Change those line with this one,

.content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: 1000px; /*$(content.width)*/
        max-width: 1280px; /*$(content.width)*/
        _width: 100%; /*$(content.width)*/
      }

Whoaa!! It changes my blog screen resolution to fit any page just in seconds. You don't need to understand the code. But,if you want, here is the simple explanation.

By default Blogger's template use fix screen size (resolution), so in that codes we define minimum and maximum width to adapt the user screen resolution.

But wait, a problem appeared. Because I used fix size image header, it also looks ugly with this new setting. So I adjusted again with the following codes. Change the following,

<img expr:alt="data:title" expr:height="data:height" expr:id="data:widget.instanceId + "_headerimg"" expr:src="data:sourceUrl" expr:width="data:width" style="display: block;" />

To this one.

<img expr:alt="data:title" expr:height="data:height" expr:id="data:widget.instanceId + "_headerimg"" expr:src="data:sourceUrl" expr:width="data:width" style="display: block; height: auto; width: 100%;" />

Now it works perfectly! although it is not perfect (No body is perfect!).

The first image above is the screenshot of this blog on smartphone (5.5") with mobile view disabled (m=0) on landscape orientation.

Solving body overflow

So far, the only existing problem in my blog is body content overflow. In small screen (13" laptop), there is empty/unused space on the left side. See the picture below (annotated by white ellipse).

Unused empty space on the left side of the blog

I added the following code to blogger css, in blogger >> Layout >> Customize >> Advanced >> Add css.

*{
min-width: 0;
max-width: 110%;
}

It solves my problem. Happy blogging.

Source:

1. http://thewebthought.blogspot.com/2011/09/blogger-make-your-blog-fluid-fit-any.html 
2. http://www.southernspeakers.net/2010/11/resize-blogger-header-image.html