ProLavish | Blogger GuruProLavish

A blog provide Blogging Ethics

Blog Responsive in 10 min

Blog Responsive in 10 min





To make your blog Responsive you do not  have to hard work ,just follow below steps and your blog get responsive within a few minutes.It is my personal experience.

Use Media Queries

Paste below code above ]]></b:skin> on your blogger template.
Looking  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) {

}
Note- Try to avoid making repeated CSS code..

Show Widgets on Mobile View

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.

Adding To Blogger

1. Go to Blogger Dashboard
2. Click the Template button
3.Find the ID of the widget you want to be available on mobile device
4. Add the attribute mobile='yes'. in   <b:widget>

Setting the Viewport

 By setting the viewport we are telling the  browsers that our blog know how to format itself  acc. to any mobile devices.
So, lets start we need to add this meta tag in blogger

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

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  to 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'/>

Gaurav dudeja

Gaurav Dudeja has 3 years of blogger experience.He wasthe only owner of prolavish .He does internet blogging and sharingblogging ethics,widgets,quality tips based on blogging.Having More than 50 followersand 250 people subscribed his blog Join me . Prolavish receives 1 thousand Pageviews/month and has over 32K subscribers

You can find us on