We hebben de standaard galeriekop, maar het mist de kleine blauwe mensen die Erica in de originele illustratie plaatste. We hadden er van tevoren over gepraat en besloten dat het best gaaf zou zijn als wanneer het formaat van het scherm werd aangepast, de mensen zouden blijven zitten terwijl de galeriewand achter hen schoof, dus het lijkt een beetje alsof ze met ontzag door de galerie bladeren.
Omdat de afbeeldingen van mensen puur ornemantaal zijn, is het niet ideaal om opmaak voor hen te gebruiken. Gelukkig zijn er twee en krijgen we twee gratis pseudo-elementen op elk element ( ::beforeen ::after). Die gebruiken we om ze toe te voegen.
We introduceren in deze video een concept dat nuttig zal blijven, het concept van "reverso mediaquery's". We werken grotendeels desktop-down in dit ontwerp, dus onze mediaquery's zijn grotendeels gebaseerd op max-width. Maar als we dezelfde mediaquery's instellen op basis van min-width, kunnen we het scherm alleen targeten als het groter is dan een bepaald formaat, niet kleiner.
In dit geval passen de afbeeldingen van mensen gewoon niet op kleine schermen. We gebruiken dus een reverso-mediaquery om ze te laden, op die manier laden we ze op grote schermen waarop ze werken, maar laden we ze niet op kleine schermen. Dat is beter dan ze de hele tijd te laden en ze op kleine schermen te verbergen.