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

[kacper3355 0]

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

[kacper3355 0]

podbijam, ma ktoś jakiś pomysł? (muszę się z tym szybko uporać)

Edytowano Czerwiec 20, 2015 przez kacper3355 (zobacz historię edycji)

[OneDistrict 12]

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.

[kacper3355 0]

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

[OneDistrict 12]

Twoja strona opiera się na bootstrapie?

[kacper3355 0]

Z tego co wiem to nie, zobacz sam: http://goo.gl/s9y5XM

[OneDistrict 12]

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ć.

[Insider 43]

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

.simplesocialbuttons {display: none;}

}

[kacper3355 0]

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 Czerwiec 20, 2015 przez kacper3355 (zobacz historię edycji)

[kacper3355 0]

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ć?

[maniack 403]

.

Edytowano Wrzesień 13, 2017 przez maniack (zobacz historię edycji)

[kacper3355 0]

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 Czerwiec 21, 2015 przez kacper3355 (zobacz historię edycji)

[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 Czerwiec 21, 2015 przez Rafiki (zobacz historię edycji)

[kacper3355 0]

@Rafiki

 

W którym miejscu powinienem dodać tą klasę?

 

EDIT: Wszystko już działa, temat do zamknięcia

Edytowano Czerwiec 21, 2015 przez kacper3355 (zobacz historię edycji)