Webové zákusky

Víc sloupců na různých zařízeních

24. 2. 2022

Kde jsme to jen viděli…

Už tu padlo slovo o tom, jak zobrazovat více sloupců na mobilních zařízení.

Vzhledem k tomu, že tato responzivita je potřebná téměř u všech šířek obrazovek, nakonec jsem napsala kousek univerzálního CSS, který toto celkem elegantně řeší.

Univerzální řešení je vždycky lepší

Jak to funguje

  • Pro danou šířku obrazovky (od … do) je dané pravidlo (nebo více).
  • Pravidlo se vždy jmenuje .width<MAX_ŠÍŘKA>_columns<POČET_SLOUPCŮ>
    • <MAX_ŠÍŘKA> je max. šířka obrazovky (ač je to omezeno i minimální, nicméně název by měl vypadat trochu inteligetně a zapamatovatelně).
    • <POČET_SLOUPCŮ> – počet sloupců, které se zobrazí, např. 2, 3…
  • Uvnitř pravidla je pak nastavení šířky, které se uplatní (např. pro 2 sloupce je to 50%, pro 3 sloupce 33%, pro 4 by to bylo 25% atd…).

Jak vybrat pravidlo, které chci

Příklad: pro mobil, tj. max. šířky 479px, chci zobrazit 2 sloupce (nikoli jen 1, jak to DIVI dělá defaultně).

  1. V CSS tedy najdu pravidlo, kde je uvedeno „max-width: 479px“
  2. Zkopíruji název požadovené třídy (tady je na výběr jen jedno, ale pokud chcete víc, račte si upravit) – zajímá nás tedy width479_columns2.
  3. Pravidlo vložíte do modulu podle návodu níže.

Jak to použít

  1. Vložíte kód z této stránky do globálního CSS (Vzhled -> Přizpůsobit -> Vlastní CSS (dole v menu).
  2. Uložíte globální CSS.
  3. V DIVI builderu pak otevřete nastavení Row (zelený modul se sloupci) a do Advanced (3. záložka) vložíte požadovanou třídu (princip výběru třídy je popsán výše).
image 24

Omezení

Pravidla jsou psaná tak, aby fungovala na všechny sloupce v modulu Row. Proto to na jiném typu modulu nebude fungovat, leda by měl stejnou strukturu. CSS jde samozřejmě upravit, aby fungovalo libovolně, všetně jiných builderů (Elementor), nebo žádných builderů.

Kód uvedený na stránce je možné libovolně upravovat.

Globální CSS kód

/* column settins for various resolutions BEGIN */

@media only screen and (min-width: 1406px) {
  /*left as it is*/
}

@media only screen and (min-width: 1221px) and (max-width: 1405px) {
  /*left as it is*/
}

@media only screen and (min-width: 1101px) and (max-width: 1220px) {
  .width1220_columns2 .et_pb_column {
    width: 50% !important;
  }

  .width1220_columns3 .et_pb_column {
    width: 33% !important;
  }
}

@media only screen and (min-width: 981px) and (max-width: 1100px) {
  .width1100_columns2 .et_pb_column {
    width: 50% !important;
  }

  .width1100_columns3 .et_pb_column {
    width: 33% !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 980px) {
  .width980_columns2 .et_pb_column {
    width: 50% !important;
  }

  .width980_columns3 .et_pb_column {
    width: 33% !important;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .width767_columns2 .et_pb_column {
    width: 50% !important;
  }

  .width767_columns3 .et_pb_column {
    width: 33% !important;
  }
}

@media only screen and (min-width: 300px) and (max-width: 479px) {
  .width479_columns2 .et_pb_column {
    width: 50% !important;
  }
}

/* column settins for various resolutions END */

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