Two weeks ago, Sara Soueidan tweeted about the love of CSS Vertical Media Queries, I’ve remembered that I used them in some projects and so I decided to write an article about them.

We all love media queries, don’t we? Without them our layouts won’t be responsive. Media queries that check for min-width and max-width are well-known and used a lot. In this article we will explore different use cases for using vertical media queries in CSS. So we will focus on min-height and max-height.

1. Sectioning Content

Sometimes the designer work on a web page that is divided into multiple sections, each one should occupy the full viewport height. In CSS, the easiest way to do it is by using viewport unites vh, vw, vmin, vmax. If each section has a content that almost fill it, in smaller viewport height this will cause an overlapping issue so we will notice that each section content appear above the other.

The solution is that we apply the height: 100vh only if the height is bigger than a specified value, test your design and when you notice that something is broken, add a breakpoint.

Demo

Now the section default height will be determined by the content inside it and if the viewport height is bigger than 400px and width is > 500px, the section height will be 100vh (100% of the viewport).

Fixed headers are a trend and requested from clients a lot these days. I personally don’t like them because they occupy from the screen estate, specially if the height was a bit big. In smaller viewport screens, like for example a mobile landscape mode, why not making the header fixed? We can make it like so only after a certain height so we will be sure that the it doesn’t occupy a lot from the screen estate.

Demo

When you have a fixed footer in your design and you want it to be fixed while scrolling, you might face an issue when the viewport height is not big enough, the hero section content will overlap with the footer and the user won’t be able to read the text. So for that, we will apply the fixed thing for the bar only when the viewport height is good.

Demo

4. Modals

Usually the modal (dialog) should be centered vertically and horizontally. The goal of this is to grab the user attention. But, in smaller viewport screens the modal top and bottom edges might be very close to the screen vertical edges. In that case, it’s better to make the modal centered horizontally only and for the vertical centering, it will stick to top (no centering).

Demo

There are a lot of patterns for mobile navigation. One of them that cover the whole screen as in the below illustration. In mobile portrait mode it’s almost looking good and the user doesn’t need to scroll down a lot. But in landscape mode, the scrolling will be annoying so the solution for that is to check for height, if it’s less than 400px for example, each navigation item will occupy 50% width.

Demo

In some cases, it’s useful to switch the header element between being fixed at top and on the side. We can do that by checking for the width and height.

Demo

7. Shrinking Font Sizes and Spacing

Simply the idea is to shrink the font sizes and spacing to show more content when the height is not enough. While I don’t recommend to follow this approach 100%, but be sure to use it with care. Test, Test, test…

Bootstrap has a nice example of this, while I was searching about the topic I found a page on CSS Tricks that has an example of this idea.

Demo

The End

It’s the end! Do you have any interesting use cases that you would like to share with me? I will be happy to hear from you on Twitter! Ping me on @shadeed9

{% include note.html content = “Some of the above use cases and solutions are examples of issues I faced while working on real projects. That said, they might not work for your case so please pick them wisely and carefully.” %}

Further reading:

• 5 Uses for Vertical Media Queries
• Go Vertical
• Vertical Media Queries - Twitter Bootstrap Example
• Quick Tip: Spare a Thought for Vertical Break Points

{% include share.html text = “Use Cases For CSS Vertical Media Queries” link = “https://ishadeed.com/article/vertical-media-queries/” %}

Thank you for reading, you are AWESOME <3