Vertical Media Queries
Vertical Media Queries
Sometimes, it is very useful to build a component and test it by resizing the browser width. But it may often be overlooked to test for height.
A common scenario is that in a main and aside layout scenario, some auxiliary navigation links are located at the bottom of the aside.
See the following example, the auxiliary navigation link is stuck to the bottom of the aside through position:sticky. When the height is sufficient, it looks good.
However, if the browser window height is small, the secondary navigation links will be squeezed and overlap with other content.
We can avoid this problem by using CSS vertical media queries.
@media (min-height: 600px) {
.aside__nav {
position: sticky;
bottom: 1rem;
}
}This way, the secondary nav will stick to the bottom only if the viewport height is greater than or equal to 600px.
There may be better ways to achieve this behavior (such as using margin-auto ), but let's focus on vertical media queries in this example.