Webové záskusky

Pořadí sloupců na mobilu a tabletu

7. 3. 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.

Další články

Jak přidat fonty do DIVI

V článku o lokálních fontech v DIVI jsem popisovala, jak je možné přidat do DIVI vlastní font a co dělat, pokud DIVI daný formát fontu nepodporuje (tedy jiný formát než TFF nebo OTF). Někdy je...

lupa, zoom