Media queries problem z ekranem responsywnym

pytanie zadane 22 czerwca 2020 w HTML i CSS przez Mateusz450 Początkujący (380 p.)
zmienione kategorie 22 czerwca 2020 przez Comandeer

Cześć, jestem w trakcie tworzenia portfolio i mam problem otóż zawierając w media kod nie reaguje na zmiany. Przykładowo zmieniam fonta na mniejszego lub kolor i brak efektów po zapisaniu i odświeżeniu strony. Korzystam z visual studio code.

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Saira Condensed;
}

header {

    display: flex;


}

@media (min-width: 360px) and (orientation: portation) {

    div.hello {

        margin: 25% 10%;
        width: 80%;
        color: red;

    }
}


section.welcome {

    height: 100vh;
    background-color: #0D0D0D;
    width: 50%;
}

div.hello {

    margin: 25% 10%;
    width: 80%;
    color: rgb(218, 214, 214);

}

div.hello p {

    font-size: 40px;

}


div.hello h1 {

    font-size: 40px;

}

div.hello h2 {

    font-size: 40px;

}


section.welcome1 {


    height: 100vh;
    background-color: #262626;
    width: 50%;


}

section.welcome1 h1 {

    color: rgb(218, 214, 214);
    font-size: 40px;
    text-align: center;
    margin-top: 100px;
    text-transform: uppercase;
    ;

}

div.html img {

    display: flex;
    margin: 0 auto;
    margin-top: 100px;

}

div.html {

    background-color: #e54d26;
}

div.css img {

    display: flex;
    margin: 70px auto;

}

div.css {

    background-color: #3799d6;

}

button {

    margin-top: 50px;
    width: 50%;
    height: 80px;
    font-size: 25px;
    text-transform: uppercase;
    transition: 0.33s;
    border: none;
    border-radius: 3px;
}

button:hover {

    background-color: #8C8C8C;
}

<!DOCTYPE HTML>
<html lang="pl">

<head>
    <!-- kodowanie znaków, możemy używać polskich znaków -->
    <meta charset="utf-8" />
    <!-- sposób wyświetlania na urządzeniach mobilnych -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- tytuł stron. m.in. w wynikach wyszukiwania -->
    <title> Portfolio</title>
    <!-- importujemy czcionkę, żeby jej użyć -->
    <!-- Czcionka Baloo Bhaina2 -->
    <link href="https://fonts.googleapis.com/css2?family=Exo:wght@400;500&family=Teko&family=Ubuntu&display=swap"
        rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Saira+Condensed:400,700|Saira:300,400&amp;subset=latin-ext"
        rel="stylesheet">
    <!-- ikonka strony -->
    <link rel="icon" href="favicon.png">
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
    <script src="https://kit.fontawesome.com/19e8f3a90d.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/style.css">

    <script>

    </script>
</head>

<body>


    <header>
        <section class="welcome">
            <div class="hello">
                <p>Witaj!</p>
                <h1>lorem </h1>
                <h2>lorem
                </h2>



                <button>Zobacz moje portfolio</button>
            </div>
        </section>

        <section class="welcome1">

            <h1>Technologie które dotychczasowo poznałem </h1>

            <div class="html">

                <img src="../img/html.png" alt="">

            </div>

            <div class="css">
                <img src="../img/css.png" alt="">

            </div>


        </section>

2 odpowiedzi

odpowiedź 22 czerwca 2020 przez sitek94 Użytkownik (540 p.)
edycja 22 czerwca 2020 przez sitek94

Na pierwszy rzut oka to wkradła się literówka w media queries:

@media (min-width: 360px) and (orientation: portation portrait)

@edit:

Teraz zauważyłem jeszcze, że najpierw napisałeś @media queries dla div.hello a później je napisałeś już normalnie bez @media queries. CSS jest parsowany od góry od dołu i jeżeli selektory mają taką samą wartość (tak jak tutaj - div z klasą "hello"), to wygra ten z nich, który będzie ostatni.

komentarz 22 czerwca 2020 przez Mateusz450 Początkujący (380 p.)

Poprawiłem literówkę nadal nie reaguje, więc w czym może być problem. Próbowałem bez orientation, tylko min width, ale bez zmian.

komentarz 22 czerwca 2020 przez sitek94 Użytkownik (540 p.)

Właśnie poprawiłem odpowiedź co jest faktyczną przyczyną :)

Musisz zamienić kolejność:

div.hello {
  margin: 25% 10%;
  width: 80%;
  color: rgb(218, 214, 214);
}

@media (min-width: 360px) {
  div.hello {
     margin: 25% 10%;
     width: 80%;
     color: red;
   }
}