29 Nov 2011
Make your Blogger Blog Responsive
Responsive Web Design has now become the integral part of the web. With the oncoming of the media queries in CSS3 ,it has become even more easier to implement it into your Blog. In a nutshell Responsive web design makes sure that irrespective of your readers Screen Size, they are able to see your blog with no (Horizontal Scroll-bar)problems. Even then very few Blogger template use it, rest still prefer using the fixed CSS (i.e. explicitly defining widths ).
This can be implemented in Blogger by simply adding a @media tag in the CSS section (b:skin) of your Blog. Media tag works by using a condition ,which defines where the enclosed CSS will apply. Here is a general Syntax of @media tag:
<style>
@media (min-width:200px){
background:blue;
}
</style>What this does is that it check for all the screen width, and for all those that are atleast 200px & above , it sets the background to Blue. Here you replace min-width with many more type of conditions like height,device-width,etc .For a complete list Check out the Officail W3C page.
Now we will be discussing how you can integrate this awesome thing into your own blog. We will be mainly be focusing on the Horizontal Scrollbar ,making sure that it doesn't appear for all the readers of your Blog. Here are some codes that are supposed to work on every blog, To add them go to
For Old Interface, Go to Design > Template Designer > Advanced > CSS
For New Interface, Go to Templates > Customise > Advanced > CSS
@media(max-width:1295px){
body{min-width:1020px;}
h1{font-size:35px;}
.sidebar .widget{width:215px;}
.content-outer, .content-fauxcolumn-outer, .region-inner{min-width:1020px;max-width:1020px;_width:1020px;}}
@media (max-width:1050px){
body{min-width:880px !important;}
.content-outer, .content-fauxcolumn-outer, .region-inner{min-width:840px !important;max-width:880px !important;_width:880px !important;}
h1{font-size:21px;}
h5{font-size:12px;}}
Here width would be according to your choices. What max-width does is that it applies the CSS to all screen sizes till that value .In normal cases, both the above widths should be less than the total width of blog. For example if you have chosen the width of your blog as 1200px, then make max-widths as 1000px and 800px.
The line 5 & 9 reduces the size of the main Content regions (i.e. is the Post + Sidebar). Sometime the sidebar might be wide and you would also have to reduce its size as done in line 4.
I have integrated this into Stylify Your Blog, check out the screenshots below
The possibilities with this are near endless. Do try playing with this and share your experience.
Til next time,
Prayag Verma
at 19:07
