#058: Custom Header for The Gallery, Part 2 (with Reverso Media Queries)

(Updated on )

We have the basic gallery header in place, but it’s missing the little blue people that Erica put in the original illustration. We had talked about it in advance, and decided it would be pretty cool if when the screen was resized, the people would stay put as the gallery wall moved behind them, so it looks kinda like they are browsing the gallery in awe.

Since the people graphics are purely ornemantal, using markup for them isn’t ideal. Fortunately there are two of them and we get two free pseudo elements on every element (::before and ::after). We use those to add them.

We introduce a concept in this video that will continue to be useful, the concept of “reverso media queries”. We’re largely working desktop-down in this design, so our media queries are based mostly on max-width. But if we set up the same media queries based on min-width, we can target the screen only when it’s larger than a certain size, not smaller.

In this circumstance, the people graphics just don’t fit on small screens. So we use a reverso media query to load them, that way we’ll load them on large screens that they work on, but don’t load them on small screens. That’s better than loading them all the time and hiding them on small screens.