Webové záskusky

Více sloupců na mobilu

12. 2. 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/

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