Responsywność @media queries nie działa poprawnie

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!

0

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

0

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

Oto ten kawałek kodu:

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;
	}
}
0

Oto i kawałek kodu HTML :)

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

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?

0

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

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

1 użytkowników online, w tym zalogowanych: 0, gości: 1