CSS медиа-запросы выборочно не работают

Question

Я пытаюсь стилизовать страницу, рабочий стол работает отлично, моя проблема с мобильным представлением.Мобильное представление работает с выбранными компонентами, как фоновое изображение работает отлично.

Я хочу дать этой карте ширину 300px; в мобильном представлении, но это не сбор, а когда я помещаю высоту 700px или что-то еще, это работает.Как вы можете видеть на скриншоте, мобильный стиль отменен, что означает, что он не применяется.

Вот мой 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;
    }

Кто-нибудь видит что-то, чего я не вижу?

Answer 1

Я считаю, что это просто порядок в файле CSS, который определяет предпочтения.Поэтому объявите ваш стиль «по умолчанию» перед запросом медиа селектора с таким же уровнем специфичности.Например:

 .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;
  }  
}