digital-pylon

Ako skryť obrázok pri zmenšení obrazovky na mobile?

Kedže smartfónov je už dnes skoro viac ako ľudí na planéte, mnoho ľudí na internet chodí práve prostredníctvom prehliadača v mobilnom telefóne. Responzivita patrí k štandardom internetových stránok. Je preto potrebné, aby sa aj vaše stránky tomuto trendu prispôsobili a vyvarovali sa neželaných chýb, ktoré sa často prehliadnu pri tvorbe stránok na PC.

Náš prípad z praxe

Nedávno sme mali klienta ktorému obrázok kompletne prekrýval vyhľadávací formulár produktov. Na počítači sa všetko zdalo v poriadku, no akonáhle ste si stránku zmenšili na veľkosť mobilného telefónu, obrázok zatlačil formulár tak, že bol na mobiloch nečitateľný a teda nepoužiteľný.  Tento drobný nedostatok v kóde stránky spôsoboval, že až 50 % návštev nevidelo to najdôležitejšie na stránke – formulár. Ako si teda poradiť s týmto nedostatkom, ako docielime aby obrázok zmizol pri zmenšení obrazovky?

Skrytie obrázku pri zmenšení obrazovky

Postup je nasledovný:

Do CSS súboru na stránke vložte tento kód:

@media (max-width: 700px) {
img#obrazok1 {
display: none; }}

bliela kocka

Následne pridajte obrázku, ktorý má zmiznúť tento atribút:

id=”obrazok1″

bliela kocka

Výsledne by mal kód obrázku vyzerať dako nasledovne:

<img id=”obrazok1″ src=”https://i.imgur.com/1XKZPVe.png” />

bliela kocka

Id môžete pomenovať akokoľvek, my sme ho pomenovali “obrazok1”. Dôležité však je, aby sa názov zhodoval ako v CSS tak aj v kóde pri obrázku. My sme zadefinovali šírku obrazovky na 700px, môžete si však nastaviť vlastnú veľkosť kedy sa obrázok stratí.

Kód spôsobí, že obrázok sa bude zobrazovať vždy nad šírku prehliadača 700px. Akonáhle sa prehliadač zmenší pod 700px, obrázok sa stratí.

 

About the Author

Pridať Komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *

SlovakiaEnglish