Blog

Pořadí sloupců na mobilu a tabletu

Bře 7, 2022

Responzivita je super věc, pokud se pohlídají všechny detaily, a že jich není málo. Jedno z věcí, která může dělat hlavně “vizuální” problém, že mřížkové zobrazení obsahu, kdy se obsah střídá.

Na příkladu níže je mřížka s obsahem 2×4 sloupce, kde se střídá ikona a obsah. Druhá čtveřice má ale pořadí prohozené, což na menších šířkách obrazovky udělá nepořádek (račte vyzkoušet zúžením okna prohlížeče). 

Proin in tellus sit amet nibh dignissim sagittis. Fusce consectetuer risus a nunc. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Integer pellentesque quam vel velit.

k

Proin in tellus sit amet nibh dignissim sagittis. Fusce consectetuer risus a nunc. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Integer pellentesque quam vel velit.

Proin in tellus sit amet nibh dignissim sagittis. Fusce consectetuer risus a nunc. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Integer pellentesque quam vel velit.

Proin in tellus sit amet nibh dignissim sagittis. Fusce consectetuer risus a nunc. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Integer pellentesque quam vel velit.

Nabízí se dvě možnosti (je jich i více, ale dvě hlavní):

1) Vytvořit vše 3x (pro každé rozlišení desktop/tablet/mobil) a zobrazit/schovat daný prvek se správnou chvíli. V DIVI je to pomocí visibility v nastavení libovolného prvku. 
+ Umlátit se to dá a je to celkem funkční
+ Vytvoříte tak i rozdílný obsah toho samého pro různá zařízení
– Všechno se dělá 3x (včetně pozdějších úprav)
– Může tu být problém s výkonem.

2) Použít pár řádků CSS – pomocí display: flex můžete jednoduše určovat pořadí sloupců a obvlivňovat podobu stránky. 
+ řešení na 3 řádky
+ není duplicitní obsah
– občas se kratší obsah na mobilu a tabletu dělá schválně, což je potom třeba tady pořešit jinak. 

U modulu řádku (row) v custom CSS je třeba nastavit dva řádky kódu níže. Display: flex je modernější způsob práce s boxy v css (dříve se pro tou používal display:block, display: inline a další…). Flex-wrap pak upřesňuje chování flexu, flex-wrap: wrap říká, že se ponechá šířka boxu, ale pokud se nevejdou na řádek, složí se pod sebe. 

display: flex;
flex-wrap: wrap;

column order

U jednotlivých sloupců v row je třeba v custom CSS nastavit ještě požadované pořadí zobrazení, překvapivě příkazem order:1, order:2, order:3, atd. Díky responzivním CSS v DIVI to jde udělat zvlášť (tj. jinak) pro mobil i pro tablet (případně pro desktop, samozřejmě).

order: 1;

column order 1

Proin in tellus sit amet nibh dignissim sagittis. Fusce consectetuer risus a nunc. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Integer pellentesque quam vel velit.

k

Proin in tellus sit amet nibh dignissim sagittis. Fusce consectetuer risus a nunc. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Integer pellentesque quam vel velit.

Proin in tellus sit amet nibh dignissim sagittis. Fusce consectetuer risus a nunc. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Integer pellentesque quam vel velit.

Proin in tellus sit amet nibh dignissim sagittis. Fusce consectetuer risus a nunc. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Integer pellentesque quam vel velit.

Co si ještě přečíst?

Zajímavosti z projektů

Jak změnit wp-login URL

Občas je zajímavé podívat se, kdo na Váš web chodí a hlavně - kam. Např. pluginy jako Wordfence a...

Bezvýpadkové nasazení webu

O co vlastně jde Ne vždy má člověk štěstí na to, aby dělal nový web od základu a občas je potřeba...

Práce s DIVI

Dlouhé sticky menu na mobilu

Při použití sticky menu (menu, které při scrolování stránky zůstane nalepené nahoře a je tedy vždy...

Lokální fonty v DIVI

DIVI má k dispozici velký výběr fontů, hlavně Google Fonts (i když některé chybí) a další. V tom...

Mega menu bez pluginu

Poslední dobou čím dál častěji potkávám tzv. "Mega-menu", tedy podmenu, které je přes celou šířku...

Návody

Dlouhé sticky menu na mobilu

Při použití sticky menu (menu, které při scrolování stránky zůstane nalepené nahoře a je tedy vždy...

Jak změnit wp-login URL

Občas je zajímavé podívat se, kdo na Váš web chodí a hlavně - kam. Např. pluginy jako Wordfence a...

Lokální fonty v DIVI

DIVI má k dispozici velký výběr fontů, hlavně Google Fonts (i když některé chybí) a další. V tom...