Divi: Jak na mobilu dát kolonky vedle sebe místo pod sebe

Úno 7, 2020 | Divi

Divi nemá jednoduché nastavení ikonek, tlačítek, obrázků a dalších modulů pro pohodlné mobilní zobrazení. Ale nevadí, s kousíčkem CSS se to dá napravit.

Nejen, že zobrazení například upoutávek pod sebe na mobilních zařízeních je UX anti-friendly, ale zbytečně roztahují stránku, když to opravdu není nutné. Většina jiných – běžných – šablon (Divi spíše vnímám jako framework, než šablonu) mají tohle nastavení automatické. Jako například Flatsome šablona, se kterou momentálně pracuji na jednom projektu.

Pokud stále nevíte, o čem je řeč, bez CSS vypadá sekce kolonek na mobilu takto:

Divi defaultně všechny upoutávky (blurbs) dává na mobilech pod sebe

Tohle my ale nechceme. Chceme, aby se na mobilu ikonky zobrazovaly vedle sebe.

Takže z deskopové verze, která vypadá takhle:

Chceme, aby se ikonky zobrazovaly na mobilu takhle:

K tomu nám poslouží tohle jednoduché nastavení:

Vytvoříme si upoutávky.
Klikneme na Nastavení řádku (řádek je v Divi označený zeleně).
Půjdeme do Pokročilé
Klikneme na ID a třídy CSS
Do kolonky Třída CSS napíšeme například, jako mám já – dve-kolonky (označila jsem si to takhle, protože mám CSSka na tom webu i na tři kolonky).

Poté ukončíme Visual Builder a půjdeme do Přizpůsobit
Úplně dole máme CSS, kde se nám otevře editor pro vlastní CSSka.
A do něj vložíme následující kód:

Pokud chcete mít vedle sebe tři kolonky, tak width se změní na 30 %, anebo pokud chcete, aby například prostřední kolonka byla nejširší, vložíte za width například 30 % 40 % 30 %.

Samozřejmě si můžete změnit i max-width. V kódu je 980px, ale můžete si jej změnit na velikost, jakou chcete.

Zde je kód ke zkopírování:

Další články

Divi: Jak udělat Swipe kolonek na mobilu

Divi: Jak udělat Swipe kolonek na mobilu

Miluju swipe scrollbar. Pokud máte totiž více než 4 kolonky, ušetří to nemalé místo na mobilních zařízeních. Je to uživatelsky přívětivé a o to jde. Takže, prvně ukázka toho, co to je swipe: Na deskopu to vypadá běžně: Blurbs neboli upoutávky na PC A takhle to vypadá...

Jaký byl rok 2019 a jaké mám plány v roce 2020?

Jaký byl rok 2019 a jaké mám plány v roce 2020?

Na konci roku se vždy dívám na roční horoskop. Ne, protože bych byla ezo-maniak, ale jen tak - občas jsou ty horoskopy tak pěkně napsané, že mi to dodá trochu motivace a síly. Rok 2019 měl být pro mě vesměs šťastný, hlavně v oblasti financí a kariéry. A jak to...

6 + 12 pluginů pro WordPress, které používám a doporučuji

6 + 12 pluginů pro WordPress, které používám a doporučuji

Pluginy jsou malé programy, které doplňují funkcionalitu Wordpressu. Wordpress je open-source systém a ve spojení s jeho obrovskou popularitou vznikly a pořád vznikají nové pluginy od vývojářů z celého světa. V tomto příspěvku bych se ráda věnovala tomu, jaké pluginy...

Rychlý tip: Buďte vždy majiteli domény a hostingu!

Rychlý tip: Buďte vždy majiteli domény a hostingu!

Ač za pár měsíců tady máme rok 2020, přesto některé agentury pořád žijí v roce 2000 a nabízí služby, které se mi nezdají moc legitimní. O čem mluvím? Sama bych tomu nevěřila, kdyby za mnou nechodili klienti s dotazem, jak by tohle měli vyřešit. Agentura, která jim...

Divi: Jak udělat text s gradientem bez pluginů a kódů? (Video)

Divi: Jak udělat text s gradientem bez pluginů a kódů? (Video)

Gradient, nebo-li volný přechod barev, je velmi trendy záležitost. Velký nešvar Divi komunity a celkově Divi “webdesignerů” je, že používají pluginy na každou hovadinu. Kde je poptávka, je i nabídka… Kdo mě zná ví, že nejsem příznivcem “pluginů na všechno”. Ale o tom...

Průvodce hotelovým marketingem #1 – cílová skupina

Průvodce hotelovým marketingem #1 – cílová skupina

Začínám se seriálem s názvem Průvodce hotelovým marketingem. Původně z toho měl být ebook, ale potom jsem od této myšlenky upustila. Měl by totiž tolik stránek, jako většina placených knih a dává mi větší smysl to dávat rovnou na svůj blog. Na co se podíváme hned ze...

Divi: Jak vytvořit patičku (footer) a použít ji na každé stránce

Divi: Jak vytvořit patičku (footer) a použít ji na každé stránce

Připravila jsem si pro vás návod, který vám určitě usnadní práci s Divi. Defaultní patičky nejsou moc pěkné a je škoda nevyužít i na tuto, často opomíjenou část, právě Divi šablonu. Nemá theme builder, proto je menu i patička v defaultu a nelze vzhled tak jednoduše...