Responsywność @media queries nie działa poprawnie

Odpowiedz Nowy wątek
2016-11-03 13:31
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!

Hej. Ile masz wartości @media? Podasz jakiś przykładowy kod? - radziol6 2016-11-03 13:47

Pozostało 580 znaków

2016-11-03 13:47
0

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


Pozostało 580 znaków

2016-11-03 15:45
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;
    }
}
Dorzuć jeszcze przykładowy HTML reprezentujący problem. - Patryk27 2016-11-03 15:47
Mam nadzieję że w rzeczywistym projekcie nie nadpisujesz elementów w "media" tymi samymi wartościami które miały wcześniej. - Markness 2016-11-03 17:48
Nie :) Skopiowałem na szybko kod :) - tracer93 2016-11-03 18:13

Pozostało 580 znaków

2016-11-03 15:50
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>

Pozostało 580 znaków

2016-11-03 16:01
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, 2016-11-03 16:01

Pozostało 580 znaków

2016-11-03 16:16
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?

Pozostało 580 znaków

2016-11-03 16:41
0

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


Pozostało 580 znaków

2016-11-03 22:30
0

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


Pozostało 580 znaków

2016-11-04 16:19
Wybitny Samiec
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ę.

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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