Responzivní web v Elementoru: oprav rozložení na mobilu

Začni kontrolou, ne přepisováním všeho

Otevři stránku v mobilním náhledu Elementoru a zapiš konkrétní problémy. Přetéká celý web, nebo jen jedna sekce? Mizí tlačítko? Je nadpis nečitelný? Každý problém řeš samostatně a po změně znovu zkontroluj širší zobrazení.

Editor umožňuje přepínat náhledy a u podporovaných nastavení volit hodnoty pro zařízení. Nastavení větších obrazovek se mohou promítat do menších, dokud je nepřepíšeš. Přesná nabídka i názvy se liší podle verze.

Najdi příčinu vodorovného posouvání

Nejčastějším podezřelým je pevná šířka větší než displej, příliš velké boční odsazení, dlouhý řetězec bez mezer nebo prvek posunutý mimo kontejner. Projdi problematickou sekci od vnějšího kontejneru směrem dovnitř.

U obrázků zkontroluj, zda respektují šířku rodiče. U dvojice sloupců zvaž na mobilu svislé řazení. Nepoužívej globální zákaz vodorovného přetečení jako první opravu: může odříznout obsah, který má návštěvník vidět.

Uprav písmo a rytmus mezer

Velký desktopový nadpis může na telefonu zabrat celou obrazovku. Zmenši ho na mobilu tak, aby stále byl výrazný, ale neoddělil návštěvníka od nabídky. Hlavní text začni přibližně na 16 px a řádkování přizpůsob písmu.

Jako pracovní hodnoty můžeš zkusit boční okraje 20 px a rozestupy sekcí 40–56 px. Jsou to doporučené výchozí hodnoty, ne pravidlo pro všechny weby. Prostor mezi tlačítky nech takový, aby se dalo pohodlně klepnout na správnou akci.

Zachovej smysluplné pořadí obsahu

Na mobilu by mělo být zřejmé, co nabízíš, proč tomu věřit a co udělat dál. Pokud desktop začíná velkou dekorací, může být vhodné, aby na telefonu předcházel obrázku obsah. Dbej ale také na pořadí v dokumentu pro klávesnici a asistivní technologie.

Pokud upravuješ pořadí pouze vizuálně, ověř, že logika čtení nezůstala jiná. Důležité informace neschovávej jen kvůli vzhledu. Krátká a dobře napsaná sekce bývá lepší než další duplicita určená jen pro mobil.

Zkouška mimo editor

• Otevři publikovanou testovací stránku na telefonu.
• Zkus úzké i širší okno a orientaci na šířku.
• Projdi navigaci a odkazy klávesnicí.
• Zvětši text a zkontroluj, že se nic nepřekrývá.
• Odešli formulář včetně chybného vyplnění.
• Pokud vidíš starý vzhled, ověř cache prohlížeče i webu.

Placený plugin není automatická oprava responzivity. Důležitější je struktura a kontrola skutečné stránky. Základní postup najdeš také v úvodním návodu k Elementoru.