Responsywność @media queries nie działa poprawnie

Responsywność @media queries nie działa poprawnie
T9
  • Rejestracja:około 9 lat
  • Ostatnio:około 5 lat
  • Lokalizacja:Rzeszów
  • Postów:108
0

Zajmuję się responsywnością w dość ważnym projekcie i pewnej części CSS mam ustawione @media screen and (max-width: 980px). Problem w tym, że te @media zaczynają działać dopiero jak zejdę do szerokości 784px :/
W headerze strony oczywiście wstawiłem <meta name="viewport" content="width=device-width; initial-scale=1.0">.
Czy ktoś może wie o co jest grane? :(

Pozdrawiam!

R6
Hej. Ile masz wartości @media? Podasz jakiś przykładowy kod?
Patryk27
Moderator
  • Rejestracja:ponad 17 lat
  • Ostatnio:ponad rok
  • Lokalizacja:Wrocław
  • Postów:13042
0

Podaj minimalny kod obrazujący problem, w innym wypadku pozostaje tylko dzwonienie do telewizyjnej wróżki.


T9
  • Rejestracja:około 9 lat
  • Ostatnio:około 5 lat
  • Lokalizacja:Rzeszów
  • Postów:108
0

Racja, sorry. Póki co mam jedną wartość @media i już na tym etapie coś nie działa :/

Oto ten kawałek kodu:

Kopiuj
ol {
  z-index: 1000;
  list-style-type:none;
  padding:0;
  margin-top: 0px;
  font-size:23px;
  line-height:2.3em;
  text-align:center;
}

@media screen and (max-width: 980px) {
	ol {
	  z-index: 1000;
	  list-style-type:none;
	  padding:100px;
	  margin-top: 0px;
	  font-size:16px;
	  line-height:2.3em;
	  text-align:center;
	}
}
Patryk27
Dorzuć jeszcze przykładowy HTML reprezentujący problem.
Markness
Mam nadzieję że w rzeczywistym projekcie nie nadpisujesz elementów w "media" tymi samymi wartościami które miały wcześniej.
T9
Nie :) Skopiowałem na szybko kod :)
T9
  • Rejestracja:około 9 lat
  • Ostatnio:około 5 lat
  • Lokalizacja:Rzeszów
  • Postów:108
0

Oto i kawałek kodu HTML :)

Kopiuj
<nav class="header elementSticky">
  <ol>
        <li><a href="?act=glowna"><i class="demo-icon icon-home" style="padding: 1;"></i></a></li>
        <li><a href="?act=rozklad_jazdy">Rozkład jazdy</a></li>
        <li><a href="?act=cennik">Cennik</a></li>
        <li>
           <a>Informacje<i class="demo-icon icon-angle-double-down"></i></a>
               <ul>
		  <li><a href="?act=aktualnosci">Aktualności</a></li>
                  <li><a href="?act=autokary">Aukokary</a></li>
                  <li><a href="?act=onas">O nas</a></li>
                  <li><a href="?act=FAQ">FAQ</a></li>
               </ul>
        </li>
 </ol>
</nav>
Patryk27
Moderator
  • Rejestracja:ponad 17 lat
  • Ostatnio:ponad rok
  • Lokalizacja:Wrocław
  • Postów:13042
0

SOA #1: u mnie Twój kod działa poprawnie, przełączając się przy 980px (Opera 41.0.2353.46) - musisz mieć gdzieś indziej coś w kodzie spaćkane.


edytowany 2x, ostatnio: Patryk27
T9
  • Rejestracja:około 9 lat
  • Ostatnio:około 5 lat
  • Lokalizacja:Rzeszów
  • Postów:108
0

Do sprawdzania poprawności wyświetlania stronki używam skrótu Ctrl+Shift+M w Mozilli ponieważ stronkę mam póki co postawioną lokalnie i nie mogę sprawdzić jej internetowymi odpowiednikami tego Ctrl+Shift+M :/ Czy Opera i Chrome ma takie wbudowane funkcje? Jak nie to jak można w tych przeglądarkach przetestować moją stronę pod kątem responsywności?

Patryk27
Moderator
  • Rejestracja:ponad 17 lat
  • Ostatnio:ponad rok
  • Lokalizacja:Wrocław
  • Postów:13042
0

Ależ jak najbardziej mają - włączasz narzędzia deweloperskie (Ctrl+Shift+I), naciskasz ikonkę i bam:
310a3d7420.png


dzek69
Moderator
  • Rejestracja:ponad 18 lat
  • Ostatnio:około miesiąc
  • Lokalizacja:Rzeszów
0

Nie używasz jakiegoś skalowania (systemowego, globalnego-przeglądarkowego, z jakiegoś dodatku) może?


0

Ctrl+Shift+M w FF powinno zadziałać chyba, że masz jakieś dziwne pluginy poinstalowane, które zmieniają Ci domyślne zachowania komponentów przeglądarki.
Spróbuj to odpalić w innej przeglądarce, jak nie zadziała to być może, strzelam, nie pozamykałeś jakiś reguł w stylach (brakująca klamra) i dlatego źle to przeglądarka interpretuję.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.