Responsive Design

The Mobilegeddon or the new algorithm of Google to rank a mobile friendly site is officially rolling out since April 21 2015. This new algorithm will affect search queries of mobile device and not for desktop and tablet device. So making our blogger template responsive is a call to action.

Applying the responsive design on our blogger template is not an easy task. We should know the basic of HTML and CSS to make things right on our blogger template. However, if you don't have any knowledge about HTML and CSS you can visit which is a good site to learn basic to advanced web development.

I know most of us are aware about the importance of responsive design for SEO and for user’s experience. But did you know that most statistics project that the mobile web usage will soon take over the desktop usage? So let’s start making our blogger template responsive because it is a big deal.

Set the Viewport

The first thing we need to do in order to make our blogger template responsive is to set the viewport meta tag. By setting the viewport we are telling browsers that our blog knows how to format itself to any mobile devices. To set a correct viewport on our blogger template we need to add this meta tag <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> on the head of our template. The viewport meta tag above simply says that the width of the layout viewport should equal to the device width. We also set the initial scale to 1 to avoid some IOS device formatting issues.

Adding Viewport Meta Tag on Blogger

1. Go to Blogger Dashboard
2. Click the Template button
3. Go to Edit HTML and search this code <head>
4. Paste the given code bellow it
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

Apply Fluid Layouts

One of the basic things we should do to make our blogger template responsive is the fluid layout. Fluid layout is a design than can adapt to different screen sizes. The typical example of Fluid Layout is when a user will turn his phone from portrait to landscape mode while maintaining the proportion of the elements on the page. Applying Fluid Layout includes using em and % as your unit of measurement instead of fix size (px). The blogger template is composed of different elements that need to adapt to different screen sizes, especially the font size, content-wrapper, sidebar-wrapper and the header-wrapper. To apply the fluid layout on these elements we should change the unit of measurement from px to em or %.

Following the example below the outer-wrapper is the parent of main-wrapper. If the width of main-wrapper is equal to 65% there for it will get the total 65% width of the parent. So now the main-wrapper has now the total width of 624px which is the 65% of 960px.

#outer-wrapper {width:960px; color: red}
#main-wrapper {width: 65%; color: green}

<div id="outer-wrapper">
   <div id="main-wrapper">

Use Media Queries

There are many kinds of devices that people are using in surfing the web such as smart phones and tablet with different screen sizes. By using the Media Queries we can design our blog according to different screen sizes because each width of a device has a different best user experience to consider. Media Queries are really important for a responsive web design, and it also helps us to optimize a critical rendering path on our blog template.

I already provide a simple CSS Media Queries, you should put it after to this code ]]></b:skin> on your blogger template. Looking at the codes below, the max-width simply say that every device having less than or equal to max-width the browser will use the CSS inside the two brackets.
/* For Desktops and Laptops*/
@media only screen and (max-width : 1280px) {
/* If device width is less than or equal to 1280px */

/* For Tablets*/
@media only screen and (max-width : 1024px) {


/* For Small Tablets*/
@media only screen and (max-width : 768px) {


/*For iPhones */
@media only screen and (max-width : 640px) {


/* Mobiles */
@media only screen and (max-width : 480px) {


/* Small Mobiles */
@media only screen and (max-width : 320px) {

Tip 1: In coding your blog design in a specific Media Queries applying the Fluid Design is a must.

Tip 2: Try to use the Chrome developer tools in designing your blog. This post might be helpful Customizing Blogger Templates Using Chrome Developer Tools.

Tip 3: Open your blog on a mobile device to see what is the possible errors happening on your blog. You may use this site: to test your blog on different mobile devices then apply Tip #2.

Tip 4: Try to avoid making repeated CSS code. For example: in the Media Queries CSS in the max-width: 768px you have already set font-size:1.2em then you must not put again the same code to max-width: 480px. Always keep in mind the word max-width.

Show Widgets on Mobile View

Some widgets on our blog might be useful to mobile view so we need to consider showing them. By default, blogger is hiding widgets when our blog is viewed on a mobile device, but we can make them available to mobile view by adding attribute: mobile='yes' in <b:widget> tag.

To add this attribute simply go to your blogger dashboard->>Template->>Edit Template and find the ID of the widget you want to be available on mobile device then add the attribute mobile='yes'.See the image below.

mobile yes attribute

If you don’t know how to find the ID of your widget you can simply go to your Blogger Dashboard->>Layout and edit the Gadget you want to get its ID. Then on the url part, just select the part of the address something similar to the image below.

Your Turn!

Responsive design is a huge topic, so I just hope you’ve learned something to this post about making your blogger template responsive. You probably encounter some problem when you start designing your blogger template for responsiveness, you can comment below to ask questions.

Thanks for reading this article now go build responsive template.


  1. Having a mobile version of the site that is friendly to mobile users is very important since there are an increasing number of viewers who are always on the go. All these codes are helpful to design a responsive interface.

  2. Yes, i have read about that Mobile Friendliness of the site now plays a crucial role... I just checked by google dashboard and there was a category there that displays the percentage of how mobile friendly your site is... thanks for this helpful tips on how to make our blogger template responsive.. i might apply it to my blogs with Blogger platforms... hope you can share tips for those using Wordpress.. thanks

    1. I forgot something to add on the article. Thanks for reminding me. You may test how responsive your blog template on this site: Mobile-Friendly Test tool by Google

  3. I'm using the responsive free blogger template and doing other facets into its HTML. I'll do what you posted it here. Thanks

    1. Your welcome sir;
      I'll try to make and publish some blogger template in the future so don't forget to subscribe on this blog.:)

  4. The widgets on mobile view can really attract interaction for mobile users. Some sites don't really invest on their mobile version but it's an emerging source of traffic.

  5. Hi sir, are the codes in "Apply Fluids in Layout" is something I need to add to my template or is it already there and I just have to edit it?

    1. Sir I can't find that part in my template. Can you help me fix my blog's mobile view?

    2. Ok sir, just include your domain here. But consider putting nofollow tag on it.

    3. I don't know how to put an link with nofollow tag sir. I'll just message it to your Facebook account.

  6. HV just created my blog on blogger but I'm unable to make it responsive, how do I make it adapt to all mobile phones.
    Please help me out friends.


NOTE - Every input is always appreciated. However, comments are always reviewed and it may take some time to appear. Always keep in mind URL without nofollow tag will consider a spam.