CSS

L spýtané 1 mesiac dozadu

Dobry den, prosim viete mi poradit, ked chcem aby sa nieco zobrazilo len na desktope (napriklad nejaky prvok, prazdne miesto) a na mobile to nechcem mat zobrazene. Aky mam pouzit v kolonke „extra class name“ kod? Napriklad pri jednej sablone mi fungovalo toto .show-mobile a .hide-desktop, ale pri inej sablone, ktoru teraz riesim, mi to vobec nebere. dakujem

7 odpovedí
Vladimír Juroško Autor blogu zodpovedané 4 týždne dozadu

Dobrý deň,
Každá šablóna to môže mať pomenované podľa seba, neexistujú na to jednotné class-y ktoré by sa dali použiť univerzálne.
Ale ak si vložíte do CSS toto, tak pri zadaní triedy .only-mobile sa prvok zobrazí iba na mobilných zariadeniach:

@media only screen and (min-width: 600px) {
  .only-mobile {
    display: none !important;
  
}
}
Vladimír Juroško Autor blogu zodpovedané 4 týždne dozadu

A .only-desktop iba na PC:

@media only screen and (max-width: 600px) {
.only-desktop {
    display: none !important;
  }
}
L zodpovedané 4 týždne dozadu

Dakujem, ale nefunguje mi to. Resp. neviem ako to tam mam presne vlozit. Nevyznam sa v kodovani, to je moj problem.

Vladimír Juroško Autor blogu zodpovedané 4 týždne dozadu

Vyskúšajte to spraviť podľa tohto návodu ako upraviť CSS a PHP šablóny.

L zodpovedané 4 týždne dozadu

OK, dakujem, vyskusam.

L zodpovedané 4 týždne dozadu

Dakujem velmi pekne, funguje to. Este by som rada vedela, ak mozem poprosit o radu, ako tymto sposobom viem schovat niektore obrazky na mobile, resp. niektore obrazky pouzit len na mobile a len na desktope. Viete mi poradit takyto kod?
 
 

Vladimír Juroško Autor blogu zodpovedané 4 týždne dozadu

Pri obrázkoch, ktoré sa vkladajú do editora článku je v sekcii Rozšírené možnosti aj možnosť vložiť CCS triedu obrázka – tam môžete vložiť rovnaké triedy ako som napísal vyššie a malo by to fungovať. V prípade editora Gutenberg je to v sekcii Pokročilé.
Dajte vedieť, či sa vám to podarilo 🙂

Opovedať

19 + 19 =