Jak wyłączyć wyświetlanie elementu dla wersji mobilnych?
- Poziom trudności:
Najprostszym sposobem na ukrycie elementów strony dla wersji mobilnych jest deklaracja zadana w pliku z zewnętrznymi arkuszami stylów. Brzmi to może skomplikowanie ale chodzi o zwyczajną edycję pliku style.css i dopisanie określonego stylu dla mniejszych ekranów. Co jeśli to rozwiązanie nie działa w Twoim szablonie? W tym minikursie przeprowadzę Cię zarówno przez podstawową edycji szablonu w wersji mobilnej jak i przez fragment kodu PHP, który sprawdza czy ktoś korzysta ze strony przez tablet lub smartfon i na podstawie tego wyświetla (bądź nie) określony fragment kodu.
Jak sprawdzić czy mój szablon ma przygotowaną wersję mobilną?
Nie ma prostszego sposobu jak wejście na stronę przez telefon i samodzielne sprawdzenie jak się prezentuje w przeglądarce w wersji mobilnej. Patrząc na tablecie warto też obrócić urządzenie i sprawdzić jak zachowa się strona przy większej rozdzielczości.
Bardzo fajna wskazówka. Ale w innym miejscu mojego serwisu www przydałby się z kolei kod, który by działał wprost przeciwnie czyli wyświetlał pewne elementy tylko na urządzeniach mobilnych (poniżej np 700 px) a nie wyświetlał ich na normalnych dużych monitorach. Czy mogę prosić o podpowiedź jak to zrobić ? Kombinuję z max i min i nic nie wychodzi mi tak jak trzeba.
Proponuję żebyś oznaczył te elementy klasą „only-mobile” i dopisał do CSS:
.only-mobile {
display: none;
}
@media only screen and (max-width: 767px) {
/* TU BĘDZIE KOD KTÓRY ODNOSI SIĘ DO EKRANÓW O SZEROKOŚCI 767PX I MNIEJSZEJ NP. */
.only-mobile {
display: block;
}
}