Na každé obrazovce

Nakonec rozvržení pro každou obrazovku. Stránka vznikla podle zásady mobile first a přidali jsme na ni dvě věci, které potřebují jiné rozvržení na mobilu a na počítači:

• Záhlaví má teď odkazy na části stránky a tlačítko Menu. Na mobilu se do něj vejde jen logo a tlačítko Menu. Od 768 px tlačítko Menu zmizí a místo něj stojí v řadě odkazy, 24 px od sebe.
• Na konci stránky jsou fotky koček z kavárny. Jsou to čtverce, nezmáčknuté, 16 px od sebe, a dohromady vyplňují šířku stránky: na mobilu jsou dvě v řadě, od 768 px všechny čtyři v jedné řadě.

Na mobilu

🐱 Kavárna Mňau☰ Menu

Naše kočky

Od 768 px

🐱 Kavárna MňauNápoje a dortyRezervaceNaše kočky

Naše kočky

V liště Šířka náhledu přepínejte mezi 375, 768 a 1280 px, abyste viděli obě rozvržení. Kontroly se dívají na rozvržení pro tu šířku, kterou náhled má, když je spustíte, a ověří, že ho vaše třídy na některém breakpointu mění.

A to je celá stránka. Web kavárny se dobře čte, reaguje na návštěvníky a na mobilu funguje stejně dobře jako na počítači. V příští lekci, Tmavý režim, dáte webu tmavé barvy pro všechny, kdo je mají raději.