Skocz do zawartości
kacper3355

Ukrycie przycisków społecznościowych na urządzeniach mobilnych

Polecane posty

Cześć. W jaki sposób mogę ukryć przyciski społecznościowe (like, tweet, +1) na urządzeniach mobilnych? Tzn. urządzeniach o rozdzielczości mniejszej niż 400px.

 

Próbowałem wrzucić coś takiego w style.css

@media (max-width:400px) { .simplesocialbuttons { display: none; } }

ale nie dało to żadnego rezultatu. Ma ktoś jakieś pomysły, jak mogę taki efekt uzyskać? Chodzi o przyciski na górze każdego posta (wtyczka to "Simple Social Buttons").

 

Przykładowy post z przyciskami - http://goo.gl/KYVyFr

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Hej. Po osiągnięciu danej rozdzielczości niech uaktywnia się ta klasa wraz z display: none. Jednak pamiętaj, żeby zawrzeć w divie tę klasę pod urządzenia mobilne. Np. class='social-buttons mobile-buttons'. To taki luźny przykład. ;)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

A masz może pomysł jak powinien wyglądać ten kod? Jestem troszkę zielony w tych sprawach, myślałem że powyższy kod załatwi sprawę ale jednak się myliłem ;)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Okej, w takim razie:

<div id="social-buttons"> 
Tutaj przyciski społecznościowe 
</div>
@media all and (max-width: Xpx) { 
     #social-buttons { 
            display:none;
           } 
}

W miejsce Xpx wstaw taką rozdzielczość, przy której przyciski mają się ukrywać. ;)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Niestety żaden z tych kodów nie działa. Wrzucam to w style.css szablonu.

 

@OneDistrict

Za te przyciski jest odpowiedzialny w/w plugin więc nie bardzo mam jak je wrzucić w tego diva :(

 

Plugin można pobrać tutaj - https://wordpress.org/plugins/simple-social-buttons/ - może to w nim można coś zmienić?

Edytowano przez kacper3355 (zobacz historię edycji)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

EDIT: Zauważyłem, że pierwszy kod (podany przeze mnie) działa ale tylko gdy skaluje stronę na komputerze. Na telefonach przyciski nadal się pojawiają... o co może chodzić?

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Przestawiłem na 710px - nadal nie działa. W przeglądarce na komputerze normalnie się skaluje i przyciski znikają, ale na smartfonach nic, nadal są.

 

Może ktoś zrobić screena strony na swoim telefonie (jakiegoś postu, górnej jego części)? Może to u mnie jest coś skopane...

Edytowano przez kacper3355 (zobacz historię edycji)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Gość Rafiki

Google Chrome ma opcje podglądu strony jako urządzenia mobilne (spora lista do wyboru) więc nie trzeba żadnych screenów ani nawet telefonu :)

https://developer.chrome.com/devtools/docs/device-mode tutaj więcej info co i jak

 

Próbowałeś przypisać np dodatkową klase do tagu html i za pomocą jej unieaktywnić wygląd menu pod daną rozdzielczość ?

 

Możesz też wykryć urzadzenie mobilne przez php i dla niego załadować osobne style ... to też jakieś rozwiązanie ;)

Edytowano przez Rafiki (zobacz historię edycji)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się


×