Media queries - Minions

Pour cet exercice, vous devrez aider les Minions à se positionner adéquatement en fonction de la largeur de l’écran.

Aperçu du résultat 👇

Matériel

Pen de départ 

Couleurs 🎨

Bleu #316c8d
Jaune #f1b905
Gris #f8f8f8

Requis de base

  1. Par défaut, le fond de la page doit-être bleu 🔵 et les textes (incluant les images) doivent être centrés.

  2. L'élément .wrapper doit avoir une largeur de 310px et être centré horizontalement dans la page.

  3. Les images des Minions doivent avoir une largeur de 150px, forçant ainsi l'affichage de deux Minions par ligne.

Fenêtre de 450px et +

  1. Le fond de la page doit devenir jaune 🟡.

  2. Le .wrapper doit avoir une largeur de 360px.

  3. Les images des Minions doivent avoir une largeur de 175px, gardant toujours l'affichage de deux Minions par ligne.

Fenêtre de 800px et +

  1. Le fond de la page doit devenir gris.

  2. Le .wrapper doit avoir une largeur de 620px.

  3. Les images des Minions doivent avoir une largeur de 150px, affichant maintenant les quatre Minions sur une même ligne.

Notes de cours 📚