How to hide div element according to screen resolution - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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.

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.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon