Lekce 1.6

Workshop: přepracování stránky

Responzivní stránka cukrárny od mobilu po desktop, mini-review ve dvojicích podle checklistu a ukázky nejzajímavějších řešení.

Cvičení 2

Tablet

Co si vyzkoušíte

Přidáte stránce rozvržení pro tablet. Vycházíte ze stránky s hotovými kartičkami z předchozího cvičení. Cílový stav ukazuje snímek vysledek-tablet.png ve složce projektu.

Zadání

Všechno v tomhle cvičení patří do připravené media query pro šířku od 660px.

Hotová kartička jahodového dortu na tabletu: obrázek vlevo na necelou třetinu šířky, vpravo v bílé části název a popis. Rohy obrázku jsou zakulacené jen na levé straně.

  1. Omezte šířku obsahu ve třídě .container na 700px a vycentrujte ho na stránce.
  2. Překlopte kartičky na šířku: obrázek vlevo na 30% šířky kartičky, název a popis vpravo. Kartičky zůstávají pod sebou a zakulacení rohů obrázku musí sedět i v nové poloze.
  3. Rozdělte sekce patičky do dvou sloupců, dvě nahoře a dvě pod nimi.
  4. Projděte šířky od 660 do 1099 pixelů a zkontrolujte, že nikde nic nepřetéká. Zkontrolujte i 659 pixelů, kde má stránka vypadat ještě jako na mobilu.