How to make blogger template mobile friendly

Mobile friendly responsive blogger template 

Check whether your website is mobile friendly or not in Google search console. Please follow the steps given bellow, steps are neatly described with screenshots

Step 1. Open your Webmaster account and add your website link to 'ADD A PROPERTY'

Step 2. Go to Web tools and than Go to 'Mobile Usability' and you will see 'Usability issue' go to any one to see its status and you can see the exact issue
After clicking on any one, you will see number of errors related to that blog, Click on any one

Step 3. You will see number of errors related to the Blog, click on any one

Step 4. Click on 'Check live version'

Step 5. Verify

Step 6. So you need to make your blog 'Mobile Friendly'

To cross verify whether your site is mobile friendly or not, open your blog in mobile through any browser and refresh web page

Either of the above type of page will be visible if your web page is not optimized for mobile friendly

If you are getting an error as shown above 'Page is not mobile friendly'. Than you need to add an HTML meta code to your blogger blog as give below. Copy and paste given below code to your blog in header...

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

After that please copy and paste given below CSS code to your blog in theme area to advanced settings as shown bellow

@media only screen and(max-width:1280px)
@media only screen and(max-width:1024px)
@media only screen and(max-width:768px)
@media only screen and(max-width:640px)
@media only screen and(max-width:480px)

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

Follow same processor from Step 1 to Step 6 to check Google search console result for mobile friendly behavior of your webpage/blog

And you can recheck mobile friendly feature in your mobile by loading your blog..

Now your blog in mobile looks Good and readable, no issues of font size. Friendly behavior of blog attracts readers and makes them to follow blog.