CSS media queries selectively not working

Question

I'm trying to style a page, the desktop is working perfectly fine, my problem is the mobile view. The mobile view is working on selected components, like background image is working perfectly.

I want to give this card a width of 300px; on mobile view, but it's not picking, but when I put height of 700px or anything it works. As you can see on the screenshot, the mobile styling is cancelled meaning it's not being applied.

Here's my CSS

@media only screen and (max-width: 600px) {
 h3 {
font-size: 1.2em;
 }

.ant-card {
  margin: auto;
  width: 300px;
}

.Background {
background-image: url(./images/mob.jpg);
background-size: cover;
text-align: center;
}

}

 .ant-card {
   margin: auto;
   width: 400px;
    }

Anyone seeing something I'm not seeing?

Answer 1

I believe it is simply the order in the CSS file dictating the preference. So declare your "default" style before a media selector query with the same level of specificity. E.g:

 .ant-card {
   margin: auto;
   width: 400px;
 }

 @media only screen and (max-width: 600px) {
   h3 {
     font-size: 1.2em;
   }

  .ant-card {
    margin: auto;
    width: 300px;
  }

  .Background {
    background-image: url(./images/mob.jpg);
    background-size: cover;
    text-align: center;
  }  
}