Tryb Responsywny

Question

Witam dlaczego w trybie responsywnym w przeglądarce mimo, że ustawiłem, iż poniżej 780 px szerokości obraz ma się zmieniać to kiedy sprawdzam w trybie reponsywnym ( bo normalnie jak zmniejszę ekran ręcznie myszką to @media działają) to nic się nie zmienia?

1.

2.

 

3.

Efekt powinien wyglądać tak:

Ten layout jest z poradnika internetowago z tym, że zamiast float left i right ja użyłem flexboxa.

Answer 1

To oczywiście nie ma żadnego związku. Dodaj np: background-color: red; do body w media i zobacz czy reaguje.

Możliwe, że zmiana położenia nie jest powodowana przez media, ale np natywnym zachowaniem elementów.

Comments

Nie jest spowodowana natywmnym zachowaniem tylko tym że tak to ustawiłem w @media queries

@media(max-width: 760px)
{
    header
    {
        flex-direction: column;
    }
    header h1
    {
       padding-left: 12px;
       
    }
    .slider
    {
        text-align: center;
        padding-left: 80px;
        padding-bottom: 80px;
        padding-top: 40px;
    }
    
    .photo
    {
       width: 500px; 
    }
    .email
    {
        flex-direction: column;
        text-align: center; 
        padding-top: 0
    }

Zmartwiło mnie to bo np. pobrałem sobię stronę oryginalną z poradnika i ona się zmienia także w trybie responsywnym ( z tym że jeszcze raz, są znaczne różnice ponieważ ja nie wzorowałem się na jego kodzie tylko na wyglądzie, wyszła mi identyczna, nawet media działają ale jak ręcznie zniejszę u niego http://www.traversymedia.com/download... media działają także w trybie responsywnym kiedy zmniejszasz)

---

Nie jest spowodowana natywmnym zachowaniem tylko tym że tak to ustawiłem w @media queries

Czyli zachowują się tak jak chciałeś. To w czym problem?

---

Bardzo się cieszę, że zachowują się tak jak chciałem z tym, że jak bym kiedyś chciał zobaczyć jak strona wygląda na innych urządzeniach to boję się, że tryb responsywny mi nie pomoże. np. mam laptopa a chciałbym zobaczyć jak wygląda na większych ekranach.