Hej, mam stronę opartą na wordpressie, dokładniej na szablonie Sydney. Na stronie głównej pod slajderem znajduje się grafika, koło korzyści z informacjami, czym zajmuje się firma. Treść na grafice jest nieczytelna na urządzeniach mobilnych, dlatego dla małych ekranów chciałbym zastąpić ją tekstem.
W tym celu w arkuszu styli stworzyłem 2 klasy large-screen i small screen, mające na celu ukrywać treści tekst na dużym ekranie i grafikę na małym.
@media (max-width: 992px;){
.large-screen{
display:none;
}
}
@media (min-width: 992px;){
.small-screen{
display:none;
}
}
Natomiast na stronie wyświetlanej na stronie głównej zastosowałem je w ten sposób:
<div class="large-screen"><img class="aligncenter" src="image" /></div>
<div class="small-screen"><p class="small-screen">tekst</p></div>
Niestety, nie działają one prawidłowo i wyświetlony jest zarówno tekst jak i grafika w każdej rozdzielczości. W jaki sposób można to prawidłowo rozwiązać?
