HTML5 and CSS3: Building Responsive Websites

Hiding an element with media queries

This recipe will show you some very useful tricks with media queries to make elements disappear off the screen, depending on the browser window's size. There are a few different methods of hiding an element on the screen, I will go through three of them in this recipe.

Getting ready

This method can have a number of use cases. One very helpful case is using it to switch out menus on the fly when scaling a page down to a smaller device. You could also use this to change the way your content areas or aside contents are displayed. The possibilities are unlimited when you get creative with the methods.

How to do it…

Set up a simple page for demonstration. In my example, I wrote up a page with a h1 header, an image, ...