Sunday, November 17, 2013

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.

No comments:

Post a Comment