@media CSS в Rails

Question

Итак, я пытаюсь использовать @media в CSS в моем проекте rails. У меня есть текст, который должен отображаться только на мобильном телефоне Вот код

a.html.erb

    <div class="A__b--c-d"> 
    <%= link_to .......
     ....
    </div>

b.scss

div.A__b--c-d {
    display: none;
}




@media only screen and (min-width: 200px) and (max-width: 900px){
  .A__b--c-d{
     display: inline-block;
   }
 }

Я не могу отобразить текст на мобильном телефоне.

Вот что я пытался до сих пор.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 Pasted this in Chrome inspect element

 All the names are right

Answer 1

Вы допустили ошибку в своем медиа-запросе. Попробуйте это

 .A__b--c-d {
    display: none;
}
@media only screen and (max-width: 900px){
  .A__b--c-d{
     display: inline-block;
   }
 }

Answer 2

Вам нужно удалить .div и просто выбрать максимальную ширину в медиа-запросе.

.A__b--c-d {
  display: none;
}

@media only screen and (max-width: 900px){
  .A__b--c-d{
     display: inline-block;
   }
 }