Responsive English

Test Responsiveness

Convert Your Current Blogger Template Into Responsive

Before continue with this process make sure that it requires basic knowledge about HTML5 and CSS3 because i only can guide about method and implementation is totally depend on your template codes means all the class and id vary from template to template so their is not fixed pattern to do this.

First of all open your Blogger Blog >> Then Go to template Section
Click on Edit HTML and then paste below given meta code just below <head> tag.

Now Add Responsive Style sheets search for code which looks like ]]></b:skin>
Then paste paste responsive codes just above it

Here is the sample of all the Responsive CSS queries you have to paste them and then start add your current classes and id of css for responsiveness

@media screen and (max-width : 1280px) {

/* For Size Screen Less than 1280 ---*/

/* CSS CODE HERE FOR DESKTOP ---*/

}

@media screen and (max-width : 1024px) {

/* For Size Screen Less than 1024 ---*/
/* CSS CODE HERE FOR TABLETS ---*/

}

@media screen and (max-width : 768px) {

/* For Size Screen Less than 768 ---*/
/* CSS CODE HERE FOR SMALL TABLETS ---*/

}

@media screen and (max-width : 640px) {

/* For Size Screen Less than 640 ---*/
/* CSS CODE HERE FOR IPHONE ---*/

}

@media screen and (max-width : 480px) {

/* For Size Screen Less than 480 ---*/
/* CSS CODE HERE FOR SMARTPHONES ---*/

}

@media screen and (max-width : 320px) {

/* For Size Screen Less than 320 ---*/
/* CSS CODE HERE FOR SMALL MOBILES ---*/

}

Copy and paste the above format and replace /* CSS CODE HERE ---*/ for all device with css codes of your all classes and id of Header, Post Body, Sidebar, Footer and other section of your blog.

@media screen tag is for make css responsive for working different screen size

(max-width : **px) is for maximum width upto which codes will work just like if you place code in the section of 320 it means when the screen size is smaller than 320 then it will works and if screen size is larger than 320 then it will not works.

Suppose if you place css in size 480 but not in 320 that means code place in 480 works from the Range of Size (0 - 480) but if place any css in 320 then CSS codes of 480 will works in range (320 - 480). Only for same classes or ids if use then in both screen sizes.

Lets See an Example

@media screen and (max-width: ****px)
{

#main-wrapper { width:100%; margin:0px auto; }
.header-wrapper { width:100%; }

#content { margin-right:0; width:100%; float:left; }
#sidebar { display:none; }

#footer-wrapper { display:none; }

}