Fix for Responsive Design of Blogger Designer Template

It is very Important to know that Designer templates like Popular "Simple Template", has no Wrapper element in their CSS, so it is futile to look into the solutions offered using them at many places. Also, You won't be able to detect and use css elements via Google Chrome or Mozilla Firefox element inspectors, for what has been rendered. I would discuss important issues only.

Problem with hyperlinks, Landing on different Page Or Home Page

Many bloggers are using mobile template which has in built feature to append the urls with ?m=1, forcing the browser to open mobile version of the page. However, it creates its own problems. Instead of writing ?m=1 at the end of url, it writes something like example.com/?m=1..... resulting into, you being landed upon the Home Page instead of the page you wanted to land on.

To fix it, find this piece of code

if (screen.width <= 699) { document.location = "/?m=1"; }

in your template and replace it with:

if (screen.width <= 699) { document.location = document.URL + '?m=1'; }

Responsive Design without using Mobile Templates:

Many Bloggers have come out with solutions about this issue. Most of them are using wrappers and containers for resizing according to device width. However many templates including this one (Simple), I am using don't have wrappers. Good news is in fact these templates are Responsive by default. You don't need to write many media queries parameters for different width sizes. Just a very simple tweak does the trick. Simply, find the following code in your template:


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

Change it to:

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

With this simple tweak, you get the Responsive Design which adjusts according to the device width and you don't need to do anything. After doing it, you get the desired dynamic width adjustment and only other thing is to make your other size elements Fluid. Fluid means simply remove static size elements in pixel and start writing in percentage term. (PS: Although it is a good starting point to make your template responsive, keep experimenting till you have fixed every issue with responsiveness).

I've added following piece of code to limit the width of the blog,spreading too far. Just find .content-inner in CSS, and alter it like this:

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

.

Also, add a little piece of code like this one in CSS:

@media all and (max-width: 900px){

.content-inner , .columns {width:100%; margin-left:0 !important;margin-right:0 !important;}
#header-right {float:left}
#crosscol {
width: 80%;
}


Implementing all the above, You would exactly have website like mine. I need to work on Header and footer too. So, it is still not right time for saying Goodbye to the mobile template.

After coding for responsiveness, you may opt out of mobile template version of your blog. You will get a single Responsive Version of CSS which is compatible across every device. Cheers!