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.



Written by Prayag Verma

A self proclaimed Blogger Evangelist. He has been blogging for the past 4 years and likes to help people having problems with Blogger . Get more from Prayag on and Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment

I'm still not understand how to apply it to my own blog. Can you explain more clearly? Thanks :)

@Hasimas : Hacking Tutorial
Go to Edit HTML , just before ]]></b:skin> add the following code:

@media(max-width:1295px){
body{min-width:1020px;}
.content-outer, .content-fauxcolumn-outer, .region-inner{min-width:1020px;max-width:1020px;_width:1020px;}}

See here width depends on your blog's default widths. All these tags are present in nearly all Blogger templates so no need to worry. In a nutshell,for example the 1st code block, it will contain CSS which will be applicable to all screen sizes uptill 1295px. Therefore your Content Area (Post + Sidebar) width will become 1020px till 1295px after which it will take the default values present outside the @mdeia tag.These are just examples and actual widths depends on your own blog's requirement


I have checked your Blog, at this point of time it doesn't really need any @media tags, as it uses width:100% very effectively

Anonymous said...

prayag yar nice post lakin mujhe samjh nhi ai... im faisal ur frnd on facebook... kya ye resize hota hai when some1 opens it according to its screen??

@AnonymousSomething like that, to be exact you define categories ,like people with 1000px screens will see this, with 800px screens will see this,etc

To make it purely dependent on screen sizes you will have to use 100% or auto attributes in widths

Nice tutorial PV ! I have bookmarked this post to try it on my blog. Your CSS code is very simple and lightweight than using jquerry, is that right PV ?

@Share With Irfan
You are right in saying that JavaScript can also be used for this thing ,but Yes,thats the the beauty of CSS ,Simple & easy to implement

MUXLIMO said...

Hola, Brother..
Since i use a custom template.. i confuse how to customize the width on CSS code above.

My template is has (I customized myself the width from the original template. I dont know if the my width arrangement containing error or not):
#outer-wrapper{width:1007px;margin:0 auto;position:relative;overflow:hiden}
#container-bottom{width:873px;height:105px;display:block;float:left;margin-bottom:30px;position:relative;margin-left:5px}
#content-wrapper{margin:0;min-height:500px;padding:0;margin-top:150px;position:relative;z-index:999;width:1000px}
#content-wrap{position:relative}
#main-wrapper{width:600px;float:left}
#sidebar-wrapper{positon:absolute;magin-top:0;margin-left:0;float:right;margin-left:-80px;margin-top:-80px;overflow:hidden;position:relative;width:300px;z-index:100}

so, Brother.. could You give me advices about it? THanks.

@MUXLIMO
In this template there is no horizontal scroll bar till the width of the screen is 1007px , below that screen size there appears a Scroll bar. so you can define a media query for max-width:1000px (thats for everybody with below 1000px screen widths)and maybe subtract every width in the above code with 200px,

something like this

@media(max-width:1000px){
#outer-wrapper{width:807px;margin:0 auto;position:relative;overflow:hiden}
#container-bottom{width:673px;height:105px;display:block;float:left;margin-bottom:30px;position:relative;margin-left:5px}
#content-wrapper{margin:0;min-height:500px;padding:0;margin-top:150px;position:relative;z-index:999;width:800px}
..
..Rest of the code
..
}

then you similarly define a media query with max-width:800px (thats for all screen width uptill 800px) and so on

MUXLIMO said...

@Prayag Verma

ah.. thanks Bro.. ill try it. :)

Mine's a responsive design -- http://www.paulsantosh.com/

Thats really good, Nice work

Sodikin said...

Hi ... I also have tried to create a template responsive .. I share templates for free, click on my name ...

Nice one

I don't quite understand and what to put in the resolution...My outer-wrapper and wrapper are

#outer-wrapper {
margin:0 auto;
width: 1000px;
}

#content-wrapper { width:940px; margin:0 auto }

What value should i put?

Something like
@media(max-width:1000px){
#outer-wrapper { width: 800px !important;}
#content-wrapper { width:740px !important; }
}
and then

@media(max-width:800px){
#outer-wrapper { width: 600px !important;}
#content-wrapper { width:540px !important; }
}

and like this for smaller resolutions...

do i hae to put both? and where can i test the result achived in different resolution?

Yes ,both and more for subsequent smaller resolutions if you like

To test you can resize the window horizontally ,see it in this video http://www.youtube.com/watch?v=LNXfySjD_aY

i've put the code. still no luck =( not same as in the video. it's not resizing

I checked your blog, the media queries are working fine but the thing is that your template has a lot other CSS classes and ids controlling the width. You will have include all those CSS classes and ids to make it work. Try the code provided in the above post , its works for nearly all Blogger templates. (Make the changes in width accordingly)

I like this informative article. Thank you very much for providing this kind of information.

fowziey said...

There is an online tool that I prefer to use. Go check responsinator.com

Thanks for sharing this tool ,will use it to design my new templates

Kinda confusing. I honestly don't know how to do this on my blog. I have made the max width (customization area of edit template) to 900px. No sidebar. How can I make it responsive? Thanks. :)

I will recommend this to my friends..

Anonymous said...

Can you please clear the calculations? My blog details are as follows...could you please give me the code based on the below details?

Overall Width: 1100px
Content-Wrapper: 740px
Sidebar-Wrapper: 310px

Thanks in Advance

Hi Prayang ^_^

my blog use % width but how to make it responsive

body width:none
outer-wrapper width 80%
main-wrapper width 70%
sidebar-wrapper width 30%

just this I use width, all I have remove it

I hope you can teach me how to make it responsive

Thanks :D

Sync bo said...

can you check my blog and give me the appropriate codes , please
www.isyncblog.com

puisi said...

I am still confused how to make my blog template responsive. I need some extra examples.

Amn Khan said...

It Doesn't woek for me....Please Cheack my blog.....http://tutozen.blogspot.com/

yateendra said...

this blog is looking ugly in 320px size, so mr. Pryg fix it

yateendra said...

How to hide header image by @media code

nicoyuey said...

In my opinion, you should start from a 1-column bare bones template of Blogspot. From there, think mobile formatting first. Once you are satisfied with what appears on a mobile browser, then start formatting your desktop version.

I am still in the process of making my Blogspot blog responsive to both mobile and desktop browser regardless of screen size. Hope you can visit it: Nico's Mobile Blog

This post is a must-read if you want to edit your template to be responsive. Keep sharing your nice ideas! Congrats!

chatoor said...

Hello Admin my site is http://www.free-bloggertemplates.com/ it looks different in other browsers, when i open it on other pc the gadgets and content of my site looks different, pls help me to solve this

anlob said...

Hello sir I have created a blog www.anlob.org but it's template is not responsive after applying your code it got error plz help me to recover it ..

Would you plz check my blog ( http://mobxplorer.blogspot.com/?m=1 ) ? I tried my best, I could decrease the size of my post, footer, sidebar. But I couldn't change the whole width of my blog. Would you please help me?

bro please check my template
even from mobile its opening so weird
help me please

iTechIDIOT said...

Prayag bro

can you plz suggest code for my blog

http://www.itechidiot.com

Thanks but will I have to disable blogger mobile template before this can work on my blog?

hi... i have try put this code to my blog but no work please help me . can you see my blog

hello sir.
i want to use responsive design for my blog www.technologers.com
please suggest me

Really helpful tutorial. My site not responsive. This post help me.

Don't Understand How to put this code & how does this works.
I put code in CSS box but not working please tell me the mistake.
Here is my blog http://mobilez2k.blogspot.com

Angraj M said...

It's not working for my blog angraj.blogspot.com plz help me where I'm making mistake..