0 Kč s DPH

Obrázky v mobilních zařízeních

Obrázky jsou jednoznačně nedílnou součástí webu, nicméně při zobrazení webu na mobilních zařízeních by obrázky v textu a motiv mohly být skryty. V tomto článku si ukážeme, jak motiv a obrázky skrýt v mobilních zařízeních.

S úpravou nám pomůže CSS vlastnost @media {}, která určí velikost ovlivněného zobrazovacího zařízení. Jakákoliv další specifikace mezi složené závorky se projeví pouze na zobrazovacích zařízeních s šířkou 768 px a menší. 

V našem scriptu pro skrytí obrázků a motivu se počítá se zobrazením obrázků u e-shopu a fotolagerií. Pro jeho použití jej stačí zkopírovat a vložit na konec Vlastního CSS stylu.

@media screen and (max-width:768px) {
#content img {display:none;}
/* motiv a vlastní motiv */
#motive,
#box-custom-motive {display:none}
/* fotogalerie */
  #foto img,
  #photos img {display:block;}

/* obchod */
  #eshop-categories img,
  #detail-product img,
  #content .thumbnail a > img {display:block;}
}

Bližší popis vlastností

Níže uvedená specifikace ovlivňuje zobrazovací zařízení do šířky 768px.

@media screen and (max-width:768px) {

}

Nejdříve vypneme zobrazení všech obrázků na webu včetně e-shopu a fotogalerií

#content img {display:none;}

Dále vypneme zobrazení motivu

/* motiv a vlastní motiv */ 
#motive,
#box-custom-motive {display:none}

Nakonec zapneme zobrazení obrázků ve fotogaleriích, kategoriích a položkách eshopu.

/* fotogalerie */
#foto img,
#photos img {display:block;}
/* obchod */
  #eshop-categories img,
  #detail-product img,
  #content .thumbnail a > img {display:block;}

Další vychytávky a úpravy s pomocí Vlastního CSS stylu naleznete v článku Základní úpravy šablony One a Slide.

Tým inPage
inpage(zav)zoner.cz

Přidat komentář

inPage.cz - webové stránky, doména a webhosting snadno.