Переопределение класса в медиа-запросе не работает - PullRequest
Новая
       63

Переопределение класса в медиа-запросе не работает

0 голосов
/ 18 июня 2020

Я пытаюсь заставить свою мобильную версию моей веб-страницы работать, и я создал 2 блока <div id="content-desktop"> и <div id="content-mobile">. По сути, оба блока содержат одни и те же элементы. То, что я сделал в своем css, - это создание раздела медиа-запросов для моего мобильного телефона. в основном css, содержащиеся в медиа-запросе, являются теми же элементами, но только по-разному. Могу ли я сделать это, поскольку не похоже, что определения медиа-запросов работают. Возьмем, к примеру, мой класс btn, когда он сжимается до мобильной версии, он все еще имеет тот же размер, что и в обычном css 200x200, а не 50x50, как мне хотелось бы. Пожалуйста, порекомендуйте. Спасибо! 

.btn {
  margin: 25px;
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 10px solid black;
  border-radius: 20%;
}

@media only screen and (max-width: 780px) {

    #content-desktop{
       display: none;
     }
    #content-mobile{
       display: block;
     }

    .btn {
      margin: 25px;
      display: inline-block;
      height: 50px;
      width: 50px;
      border: 10px solid black;
      border-radius: 20%;
     }
}
...