From the course: Advanced CSS Media Queries

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Including height in media queries

Including height in media queries - CSS Tutorial

From the course: Advanced CSS Media Queries

Start my 1-month free trial

Including height in media queries

“

- [Instructor] Height is another factor that can drive media queries. As you might expect, there's a min height and a max height just as there were min width and max width media queries. Even if most of your responsive design is driven by width-based media queries, there are still occasions where a height query might help. For example, what about a screen where an image carousel is taller than some of the shorter screens you might be working with? You could use a height-based media query to shorten that carousel or even hide it altogether at those smaller dimensions. Here in my super simple example, I have a layout where I've got these series of icons here. These are font awesome icons. And if you look at the HTML, there are set up all pretty much in the same way. There's a class of fas and then there's a class that's specific to each one of those icons individually. The first one is fa-seedling and then if you scroll on down…

Contents