Blog

Nastavení fontů pro různá zařízení

Úno 13, 2022

Nastavení velikosti fontů pro jednotlivé velikosti obrazovky je něco, na co v DIVI (ale i jinde) moc nemysleli.
Ano, je tu možnost nastavit “heading size”, ale to nastavuje pouze velikost pro H1 (jako destop, tak tablet i mobil) a zbytek je pak “nějak odvozený” od této hodnoty.
Změnu jednotlivých úrovní nadpisů jde manuálně změnit několika způsoby:

  • U každého modulu zvlášť (pfff, koho by to bavilo? A měnit to pak všude na jinou hodnotu? … asi ne).
  • Vytvořet presety (ano, trochu lepší cesta, ale vytvářet pak presety na každý typ modulu v DIVI a jeho rozšíření… asi taky ne. Navíc – DIVI nabízí v úpravách modulu jen 3 velikosti, ale reálně potřebujeme trochu jemnější rozdělení podle šířky obrazovky).
  • Responzivní CSS (úprava na jednom místě a je hotovo).

Tady je příklad CSS, které se použije pro nastavení různých šířek. Tady je ukázka s breakpointy, které nabízí samotné DIVI, ale je na Vás, jakým způsobem to změníte (rozdrobíte nebo naopak sloučíte):

Jako první je tu obecné nastavení pro největší rozlišení a poté se to stupňuje podle šířky obrazovky. Např. pravidlo:

@media all and (min-width: 768px) and (max-width: 980px) {

je pro všechna zařízení, která mají min. šířku 768 a max. 980 (průměrná velikost tabletu).

Pravidla nastavíte na jedno místě a je vystaráno.

PS: pokud je šablona/builder/web, kde toto řešíte, dobře napsána, pojede to bez problému. V opačném případě se budete prát s kaskádami pravidel a nastavení příkazu !important.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
/*** Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1405px) {
    h1, h2, h3, h4, h5 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        line-height: 1.3;
      }

    h1 {font-size: 3.052rem;}

    h2 {font-size: 2.441rem;}

    h3 {font-size: 1.953rem;}

    h4 {font-size: 1.563rem;}

    h5 {font-size: 1.25rem;}
}

/*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {
    h1 {font-size: 3.052rem;}

    h2 {font-size: 2.441rem;}

    h3 {font-size: 1.953rem;}

    h4 {font-size: 1.563rem;}

    h5 {font-size: 1.25rem;}
}

/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {
    h1 {font-size: 3.052rem;}

    h2 {font-size: 2.441rem;}

    h3 {font-size: 1.953rem;}

    h4 {font-size: 1.563rem;}

    h5 {font-size: 1.25rem;}
}

/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {
    h1 {font-size: 3.052rem;}

    h2 {font-size: 2.441rem;}

    h3 {font-size: 1.953rem;}

    h4 {font-size: 1.563rem;}

    h5 {font-size: 1.25rem;}
}

/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
    h1 {font-size: 3.052rem;}

    h2 {font-size: 2.441rem;}

    h3 {font-size: 1.953rem;}

    h4 {font-size: 1.563rem;}

    h5 {font-size: 1.25rem;}
}

/*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {
    h1 {font-size: 3.052rem;}

    h2 {font-size: 2.441rem;}

    h3 {font-size: 1.953rem;}

    h4 {font-size: 1.563rem;}

    h5 {font-size: 1.25rem;}
}

Inspirace:

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