changing display style doesn't work when use of media query

Question

I have written two different types of css display style(one for flex & one for grid) and each of them are meant to be applied differently as screen size is changed. I made the mobile version first and desktop version next. below is the mobile version html&CSS code and it displays as it is meant to.

@media (max-width: 400px) {
  .container {
    background-color: lavender;
    display: flex;
    justify-content: center;
  }

  .header {
    background-color: rgb(255,80,100);
  }

  header {
    font-size: 80px;
    padding: 95px;
    font-weight: bold;
  }

  .p {
    background-color: #5ABFF6;
  }

  p {
    font-size: 40px;
    padding: 95px;
    font-weight: bold;
  }

  .aside1 {
    background-color: #F8D557;
  }

  .aside1_1 {
    font-size: 80px;
    padding: 95px;
    font-weight: bold;
  }

  .aside2 {
    background-color: #EA77B1;
  }

  .aside2_2 {
    font-size: 80px;
    padding: 95px;
    font-weight: bold;
  }

  .footer {
    background-color: #AAE89D;
  }

  footer {
    font-size: 80px;
    padding: 100px;
    font-weight: bold;
  }
}

<body>
    <div class="container header">
        <header> Header </header>
    </div>
    <div class="container p">
        <p>But Apple is clearly disappointed with
           itself over this whole thing. It’s a humbling embarrassment
           for a company that so often highlights its focus on user
           security and privacy. "Security is a top priority for every
           Apple product, and regrettably we stumbled with this 
           release</p>
    </div>
    <div class="container aside1">
        <div class="aside1_1">Aside1</div>
    </div>
    <div class="container aside2">
        <div class="aside2_2">Aside2</div>
    </div>
    <div class="container footer">
        <footer>Footer</footer>
    </div>

However, if I attach the second CSS code(which is for desktop screen size), somehow the page layout gets mess even when I shrink the width under 400px. Below is the full CSS code.

@media (max-width: 400px) {
  .container {
    background-color: lavender;
    display: flex;
    justify-content: center;
  }

  .header {
    background-color: rgb(255,80,100);
  }

  header {
    font-size: 80px;
    padding: 95px;
    font-weight: bold;
  }

  .p {
    background-color: #5ABFF6;
  }

  p {
    font-size: 40px;
    padding: 95px;
    font-weight: bold;
  }

  .aside1 {
    background-color: #F8D557;
  }

  .aside1_1 {
    font-size: 80px;
    padding: 95px;
    font-weight: bold;
  }

  .aside2 {
    background-color: #EA77B1;
  }

  .aside2_2 {
    font-size: 80px;
    padding: 95px;
    font-weight: bold;
  }

  .footer {
    background-color: #AAE89D;
  }

  footer {
    font-size: 80px;
    padding: 100px;
    font-weight: bold;
  }
}

@media (min-width:400px) {
  body {
    background-color: lavender;
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 25% 50% 25%;
    text-align: center;
    height: 800px;
  }

  .header {
    background-color: rgb(255,80,100);
    grid-column: 1 / 4;
    padding-top: 50px;
  }

  header {
    font-size: 40px;
    padding: 20px;
    font-weight: bold;
  }

  .p {
    background-color: #5ABFF6;
    grid-column: 2 / 3;
  }

  p {
    font-size: 30px;
    padding: 20px;
    font-weight: bold;
  }

  .aside1 {
    background-color: #F8D557;
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .aside1_1 {
    font-size: 40px;
    padding: 20px;
    font-weight: bold;
  }

  .aside2 {
    background-color: #EA77B1;
  }

  .aside2_2 {
    font-size: 40px;
    padding: 20px;
    font-weight: bold;
  }

  .footer {
    background-color: #AAE89D;
    grid-row: 3 / 4;
    grid-column: 1 / 4;
  }

  footer {
    font-size: 40px;
    padding: 20px;
    font-weight: bold;
    padding-top: 70px;
  }
}

swap the order of media query placement.Media query written for desktop is overidding the mobile styles. — CodeZombie, Nov 30 '17 at 10:14
Duplicate: https://stackoverflow.com/questions/47457656/top-and-bottom-dont-work-in-media/47459858#47459858 — Quentin, Nov 30 '17 at 10:19

score 1 · Answer 1 · answered Nov 30 '17 at 10:14

Because CSS being applied From TOP to BOTTOM.

Which means the rule that is set last, is the one that will be executed.

So always place your media query at the bottom of css, e.g.

.container {
  /* your desktop styles goes here */
}

@media (max-width: 400px) {
  .container {
    /* your media styles goes here */
  }
}

Update

Take a look at this also Why do I have to put media queries at the bottom of the stylesheet?

score 0 · Accepted Answer · answered Nov 30 '17 at 12:14

I see one minor detail that at 400px viewport both of your media queries would apply, probably not what you want.

You might want to consider a change like:

@media (max-width: 400px) {  
...
}    

@media (min-width:401px) {
...
}

I'm not convinced that your issue is related to the order of your CSS though.

I have an exact copy of your HTML and CSS at https://codepen.io/panchroma/pen/qVQQoG and the mobile / desktop layouts seem to work well for me.

The one addition I've made in this pen is that I've added a viewport meta tag in the header

<head> 
   ...
   <meta name="viewport" content="width=device-width, initial-scale=1"> 
   ...
</head>

If you don't have this meta tag in your code, add it and see if this helps.

Also, is there any other CSS in your page, other than what you've posted?

Good luck!

AWESOME!!! you just solved what I'd been trying for hours to make it work.. it is so worth signing up this website. Thank you ! — Jay Jeong, Nov 30 '17 at 12:41

changing display style doesn't work when use of media query

2 Answers2