Záhlaví a zápatí teď vedou přes celou šířku

Malá změna viditelná na každé stránce tady: tmavý pruh nahoře a zápatí dole teď vedou přes celou šířku okna.

Až do dneška seděly ve stejném sloupci širokém 1180 pixelů jako všechno ostatní, takže na širokém monitoru byla stránka pruhem obsahu plujícím v prázdném pozadí. Zápatí na stránkách statistik už přes celou šířku bylo – jako jediné, a právě tahle nejednotnost to celé odstartovala.

Co se nezměnilo

Obsah uvnitř těch pruhů. Texty, tlačítka a čísla se pořád řadí na stejných 1180 pixelech jako sekce pod nimi, takže pruh je široký, ale text ne. Řádky o sto znacích nikdo nečte a nadpis roztažený přes 27palcový monitor není design, ale přehlédnutí.

Proč ne obvyklý trik

Běžný způsob, jak dostat prvek z vycentrovaného sloupce, je záporný okraj vůči 100vw. Má vadu, kterou je snadné přehlédnout na počítači s vypnutým posuvníkem: vw zahrnuje posuvník. Blok je pak širší než viditelná oblast přesně o jeho šířku a celou stránku lze o pár pixelů posunout do strany – což na telefonu znamená, že se rozložení uprostřed čtení viklá pod palcem.

Pruh tedy nesahá ven, ale začíná široký a odsazuje se dovnitř:

padding-inline: max(20px, calc((100% - 1180px) / 2))

Procenta se počítají vůči rodiči prvku, což je tady tělo stránky, a to posuvník nezahrnuje. Pod 1180 pixely vyhrává první hodnota a pruh si drží rozumný okraj 20 pixelů místo záporného. Žádný druhý obal, žádný JavaScript a nic, co by se muselo měřit za běhu.

Kde to platí

Úvodní stránka, stránka O službě a každá stránka statistik. Ve všech třech stejná konstrukce, o což šlo.