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.

43 Replies to “Make your Blogger Blog Responsive”

  1. @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

  2. 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??

  3. @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

  4. 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.

  5. @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

  6. 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?

    1. 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…

    2. 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)

  7. 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. πŸ™‚

  8. 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

  9. 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 πŸ˜€

  10. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *