You might be thinking, what’s the need for hiding a particular Widget or Gadget in mobile or tablet views of responsive blogger template?

Okay, let me tell you why you should also hide some of your widgets in your website’s mobile views. As mobile screens too small as compared to the desktop or laptops and if your template is allowing all the gadget to show in small screen, just imagine how messy your blogger site is looking in smaller screens if you have lots of gadgets in your blogger sidebar.

And reverse of that if your blog have less things to show in mobile views, it would be more clean and easy to browse your site in small mobile devices. That would also tends your site to load faster in mobiles. In this post we will see how to hide a specific widget in different screen resolutions having responsive blogger template.

How to hide widgets in responsive blogger template in different screen resolutions:

1. First you need to identify the widget which you want to hide in mobile views. For that go to Layout from your blogger dashboard and find the widget and click edit on widget you want to hide.
2. See the URL of that widget and mark the widgetId at the end of URL. That would be something like this:

Here I have selected Google Plus follower widget and its widget id is PlusFollowers1. It may be HTML1 or HTML2 if you selected a widget having third party HTML codes.
3. Copy the widget ID and go to template from your blogger dashboard. 
4. Backup your template first.
5. Click inside template codes and click CTRL+F to find @media. You’ll find three or four @media codes for different screen resolutions. Find the smaller valued code that would be for mobile screens looking similar to:

@media screen and (max-width:490px) { ………………. }

6. Add your widgetId with hash in media screen as:

@media screen and (max-width:490px) {
#PlusFollowers1  { display:none; }
…… }

7. Save and view the blog on mobile, your gadget must be hidden on mobile now.



Please enter your comment!
Please enter your name here