How to hide div element according to screen resolution

Introduction: in this article I am going explain how we can hide a div element according to screen resolution via CSS.

Description:
In the last article I have explained How to integrate Captcha in asp.net, How to create Contact Us page in Asp.net, How to use SiteMapPath Navigation Control in Asp.net, HTTP Error 404.3 - Not Found The page you are requesting cannot be served because of the extension configuration, HTTP Error 403.14 - Forbidden The Web server is configured to not list the contents of this directory and HTTP Error 500.21 - Internal Server Error Handler.

Sometimes we need to hides div element on screen resolution commonly used in responsive websites. Simple we can do it via media query.  Add the below given code in your stylesheet and define your resolution/width as you needed:

@media (min-width: 0px) and (max-width: 480px) {

.sidebar {  display: none; }

}

Adding this media query in stylesheet I hide the sidebar when window size on 480px.

We can also change the location of div according to resolution. Suppose on full screen window size all menus shows on left side but I want to change their location to right when window size his 480px via adding given code:

@media (max-width: 480px) {

  .menu-mobile { float: right; }

}

Is it helpful?

If yes post your comment to admire my work. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.