The first thing you have to do is very simple just go to the edit html section of your blog from here :
Once in this screen need to select the Template.
From the template, select Edit Html.
Find the <head> tag by selecting the Ctrl+F.
Paste the following code just after the <head> tag.
<meta content=’width=device-width, initial-scale=1, maximum-scale=1' name=’viewport’/>
Below the ]]></skin> put these.
/* For Desktops and Laptops*/
@media only screen and (max-width : 1280px) {
/*This section will contact the CSS codes for how the website will respond and look when seen in the Desktop and Laptops with the 1280px resolution wide. */
/* If device width is less than or equal to 1280px */
}
/* For Tablets*/
@media only screen and (max-width : 1024px) {
/* This section will contact the CSS codes for how the website will respond and look when seen in the Desktop and Laptops with the 1024px resolution wide. */
}
/* For Small Tablets*/
@media only screen and (max-width : 768px) {
/* This section will contact the CSS codes for how the website will respond and look when seen in the screen whose size 768px resolution wide. */
}
/*For iPhones */
@media only screen and (max-width : 640px) {
/* This section will contact the CSS codes for how the website will respond and look when seen in the screen whose size 640px resolution wide. */
}
/* Mobiles */
@media only screen and (max-width : 480px) {
/* This section will contact the CSS codes for how the website will respond and look when seen in the screen whose size 480px resolution wide. */
}
/* Small Mobiles */
@media only screen and (max-width : 320px) {
/* This section will contact the CSS codes for how the website will respond and look when seen in the screen whose size 320px resolution wide. */