klatnik / projekt-sluzby Goto Github PK

Ahoj Katko,

díky, dobrá práce 👍

Na mobilu mi v DevTools vytéká horní třetina obsahu s obrázkem a trochu se celek rozjíždí.
Zkus hlavnímu obrázku nastavit

width: 100%;
display: block;
margin: 0 auto;

To by mělo zajistit, že velikost obrázku se bude měnit flexibilně s dalším obsahem.

• kontejner by měl mít padding:60px 20px;
• prvni bych udělala jako flexbox do sloupce s vycentrovanými prvky (na desktopu pak bude potřeba sloupec změnit na řadu).
• pak bude asi trochu třeba si pohrát s odsazením jednotlivých prvků v rámci travels.

Boxíky s ikonkami

• ikonce nastavit align-items: center; - srovná to ikonku a text na jedn0 ose.
• zrušit flex-grow: 0;
• obrázky/ikonky nastavit jako display: block; a dát jim pevnou výšku a šířku a margin: 0 auto; - přemění se tak z textu (jak je obrázek defaultně vnímán) na blokový prvek a vystředí ho v rámci boxu. Od tabletu display: block; zrušit a ikonky by se měly krásně vystředit.
• text v ikonkách by měl být zarovnán nalevo - od tabletu bude třeba na střed + odsazení textu od ikonky bych řešila také tady (od tabletu bude třeba vypnout).

Tipy

• V html jsou názvy tříd, které nejsou v css stylované (mapa, kaktus apod.), to pro mě bylo trochu matoucí.
• Používat jeden jazyk pro názvy tříd (travels).

Zaujalo mě, jak jsi se vypořádala s tou modrou linkou za pomocí svg :) Super 👍
Šlo by tam třeba použít i tag <hr> a ten pak stylovat.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr