Blog

Více sloupců na mobilním zařízení

Úno 12, 2022

Klasický grid v DIVI se zachová tak, že na mobilním zařízení srovná sloupce pod sebe po jednom. Což např. v případně 6 desktopových sloupců (tedy takových, kde je např. malá ikona a úzký text) nemusí vypadat hezky, ve výsledku je pak na mobilní verze spousta scrolování a prázdného místa pod sebe.

 

Např. v případě 6 sloupců níže se elementy zobrazí na desktopu vedle sebe, na tabletu to bude mřížka 3×2 a na mobilu 6×1 (elementy budou pod sebou).

Vzorový text k zarovnání.

Vzorový text k zarovnání.

Vzorový text k zarovnání.

Vzorový text k zarovnání.

Vzorový text k zarovnání.

Vzorový text k zarovnání.

Abychom ikony zarovnali podle potřeby i na menších zařízeních, je třeba si pomoci několika řádky CSS.

Přiřadíme bloku Row extra třídu a do Appearance -> Customize (Vzhled -> Přizpůsobit) vložíme požadované CSS (jedna část je pro tablet, druhá pro mobil):

DIVI - 2 sloupce na mobilu

@media only screen and (max-width: 980px) {
    .mobile-two-columns .et_pb_column {
        width: 25%!important;
    }
}

@media only screen and (max-width: 767px) {
    .mobile-two-columns .et_pb_column {
        width: 50%!important;
    }
}

Vzorový text k zarovnání.

Vzorový text k zarovnání.

Vzorový text k zarovnání.

Vzorový text k zarovnání.

Vzorový text k zarovnání.

Vzorový text k zarovnání.

Inspirace: https://www.ezoic.com/how-to-keep-columns-side-by-side-on-mobile-in-divi/

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