0

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.

Mobile view, the card width is too large for the screen, I need it to be 300px

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?

Linda Kadz
  • 329
  • 2
  • 17
  • 1
    Your `@media` statement should be after the **ant-card** one, so it won't be overridden. – Quentin Veron Mar 16 '19 at 13:24
  • 1
    you can find the response there [https://stackoverflow.com/questions/9459062/in-which-order-do-css-stylesheets-override](https://stackoverflow.com/questions/9459062/in-which-order-do-css-stylesheets-override) – scaff Mar 16 '19 at 13:26
  • Thank you @QuentinVeron it worked. – Linda Kadz Mar 16 '19 at 13:30

1 Answers1

3

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;
  }  
}
ne1410s
  • 6,864
  • 6
  • 55
  • 61