Maximální šířka a vycentrování

Pevná šířka dělá potíže na úzkých obrazovkách: karta široká 384 pixelů se na telefon nevejde. Chceme kartu, která bude tak široká, jak to místo dovolí, ale nikdy ne širší než 384 pixelů. K tomu slouží vlastnost max-width (maximální šířka), kterou jste použili v závěrečném projektu kurzu CSS. V Tailwindu ji nastavují třídy max-w-* s pojmenovanými velikostmi:

Třída	CSS	Šířka
`max-w-xs`	`max-width: 20rem;`	320 px
`max-w-sm`	`max-width: 24rem;`	384 px
`max-w-md`	`max-width: 28rem;`	448 px
`max-w-lg`	`max-width: 32rem;`	512 px
`max-w-xl`	`max-width: 36rem;`	576 px
`max-w-2xl`	`max-width: 42rem;`	672 px
`max-w-prose`	`max-width: 65ch;`	zhruba 65 znaků

Názvy velikostí znáte z tříd pro velikost písma: xs je extra malá, sm malá, lg velká a xl extra velká. Nově přibyla md (medium), střední velikost. Větší velikosti pokračují až po max-w-7xl. max-w-prose je určená pro text: jednotka ch je šířka číslice 0 v písmu prvku, takže řádky budou mít zhruba 65 znaků, a to se dobře čte.

Na širokých obrazovkách pak kartu potřebujeme dostat doprostřed. V kurzu CSS jste psali margin: 0 auto, v Tailwindu je to mx-auto:

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

(Tailwind to zapisuje jako margin-inline: auto, což v jazycích psaných zleva doprava znamená totéž.) Prohlížeč rozdělí volné místo vedle prvku rovným dílem mezi jeho levý a pravý okraj. Proto to funguje jen u prvku, který je užší než jeho rodič, tedy má nastavenou šířku nebo maximální šířku. A nepleťte si to s text-center: to vycentruje text uvnitř boxu, kdežto mx-auto vycentruje samotný box.

Pokyny

V atributu class karty nahraďte w-96 třídou max-w-sm. V širokém náhledu zůstane karta široká 384 pixelů, ale klikněte znovu na 375 px: teď se vejde.

Kartě přidejte třídu mx-auto, která ji přesune doprostřed stránky. V úzkém náhledu je vedle karty jen málo volného místa, takže je změna malá. Zkuste 768 px.

Začněte programovat zdarma

5/9