In one of my previous post i have shared a tutorial about how to hide or show blogger widgets on a specific pages. but in today’s article i would like to share an another tutorial related to blogger widgets is that how to hide blogger widgets from a specific screen resolution.

After reading the title of this post, you may start thinking, why should you hide widgets from a specific screen resolution. As we know the trend of smartphones and tablets are continuously increasing. Within a year, a lots of blogs and website designs are converted into responsive design. so, responsive design trend also increasing as well. now most of people likes to browse internet through smartphone. You can check your Google analytics report to know, how many of visitors of your blog are coming through different devices as well as different screen resolution.

Responsive design is becoming important thing for the bloggers and website owners. If you haven’t changed your blogger template to responsive design yet, then you can find best responsive blogger template from our Free Blogger Templates gallery . or if you have already responsive design then you should be knowledgeable about how to maintain responsive design.

Also see : Android Act – Free Responsive Blogger Template

Downloading and installing responsive blogger template to the blogger isn’t enough but you should also take care about widgets you adds. Suppose if you have installed pop-up or pop-out widget to your blog, then you should disable it for small screen-sizes. otherwise it will disturb your readers to read your blog articles, because your template is responsive but the widget will work as normally for desktop version. in this situation you have 2 ways to solve it, one is you need to make that pop-up widget responsive or second thing you can do is that you need to hide from the small screen-size.

See how badly it appears in the screen-shots below that i have captured from Samsung quattro which has 480 x 800 (WVGA) resolution.

Screenshot_2014-03-07-19-23-45

Screenshot_2014-03-07-19-24-29As you can see above screen-shots , it looks ugly and visitor won’t be try to close the pop-up but they will try to leave your blog as fast as possible.

How to Hide Blogger Widget From a Specific Screen Resolution ?
All custom widgets of your blog has a unique widget ID like HTML1, HTML2, HTML3, so, first of all find your widget and its ID by navigate to Blogger Dashboard > Layout > find the gadget that you want to hide then right click on “Edit” option and select “Copy link location

Copy link location
Now, open notepad file and paste the code and look carefully , you will need to find widget ID from the link location. See the example of link location code below, to get idea how actually it looks like and how to find Widget ID from it.

https://www.blogger.com/rearrange?blogID=6190586715695010857&widgetType=HTML&widgetId=HTML1&action=editWidget&sectionId=sidebar

As You can see above Green colored text “HTML1” is the widget ID in above URL, now look for yours, your widget ID might be different like HTML2, HTML3 or so on. Now, keep Widget id in your mind and go for the next step.

Now, we will use CSS3 media query to hide that widget from a specific screen resolution. If you want your widget to be displayed into desktop version only. then you should use below media query :

@media screen and (max-width:1039px){
#HTML1{
display:none;
}
}

Replace “HTML1” with your Widget ID ( Make Sure the ID may Exact to match in the URL even a Block Letters (Capital Letters) also for perfect working. )

Now, if you would like to hide widget for a specific screen resolution then you can change the media screen width (max-width:1039px) in above code. but i recommended you to use above code only. to hide pop-up like widgets from small screen-size.

Now, go to blogger > Template > Edit HTML then use CTRL + F to search ]]></b:skin>. and paste the media query CSS code just above it.

Finally, save your template and use matt kersley’s Responsive design test tool [Link] to check that widget disabled from the small screen-size or not.

If you have any questions / query related to this article or this blog, then you can feel free to ask by joining the discuss here. then you will get fast response and best answer by the community member or admin.