Css media doesn't work when i re-size the screen

Question

your textI am practicing Grid with this design. when I created @media for the design, the css doesn't change from width full screen to phone screen. I did insert "<link rel="stylesheet" href="./css.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>"

here is my html code:

<div class="appdiv">
            <p class="apptx">Download <br>Our App</p>
                <p><br>Order your favorite food from your phone!!<br>
                    To make ordering more comfortable and faster for you<br> we’ve created our personal application. <br>Now you can make orders from any device and whereever you are.</p>
            <div class="phdiv">
            <a href="https://apps.apple.com/us/app/mazza-more/id1159500430" target="_blank"><img class="logoimg" src="./image/iosapp.png"></a>
            <a href="https://play.google.com/store/apps/details?id=hr.apps.n279798" target="_blank"><img class="logoimg" src="./image/google-play-download-android-app-logo-png-transparent (1).png"></a></div>
            

            <img class="appph" src="./image/showph.png">
            
            
        </div>

this is my css code:

@media screen and (max-width: 790px) {
 .appdiv {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 120px 50px 20px 120px;
    width: 100%;
    height: 50vh;
    text-align: center;
  }

  .appph {
    height: 200px;
    width: 150px;
}

}


p {
  font: 1.2rem bold;
}

.left {
  text-align: left;
  line-height: 1.8;
}

img {
  margin-right: 35px;
}

.bhours {
  margin: 25px;
}

.time {
  line-height: 1.4;
}

.logoimg {
  height: 40px;
  width: 120px;
}

.phdiv {
  text-align: center;
  display: inline-block;
  margin-top: 150px;
}

.appdiv {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 120px 50px 20px;
  background-color: white;
  width: 100%;
  height: 50vh;
  text-align: center;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

.appph {
  height: 400px;
  width: 350px;
  grid-area: 1/2/4/3;
}

.apptx {
  margin: 50px;
  text-align: center;
  font: 1.8rem bolder;
}

Answer 1

The problem is the order of your CSS rules: Since the regular rules follow after the media queries, they overwrite them (they are valid for all sizes).

To avoid that, move the whole @media... { ... } section to the end of your stylesheet.