css: мобильный стиль переопределяется вложенным css

avatar
user15909643
9 августа 2021 в 04:59
62
0
0

У меня есть элемент с двумя селекторами. Когда я уменьшаю экран для просмотра на мобильных устройствах, я по-прежнему вижу, что ширина соответствует ширине isActive вместо ширины 100% класса @include tablet-down. В Chrome я вижу, что он распознает ширину мобильного устройства, но класс isActive имеет более высокую специфичность, поэтому он переопределяет его. Как лучше всего справиться с этим, чтобы он учитывал ширину для мобильных устройств?

<div class="main isActive>

</div>  




.main {
   position: relative;
   width: 360px;

  &.isActive {
    width: calc(100vw - 500px);
  }

  @include tablet-down {
     flex: 0;
     width: 100%;
  }
}
Источник
Minal Chauhan
9 августа 2021 в 05:02
0

Вам также необходимо добавить отзывчивый css в класс isactive следующим образом: &.isActive { width: calc(100vw - 500px); @include tablet-down { flex: 0; width: 100%; } }

user15909643
9 августа 2021 в 05:06
0

спасибо .. можно ли сделать эту сушилку без повторения кода? У меня много применений класса isActive в моем HTML, и мне пришлось бы копировать/вставлять туда все мобильные стили.

Amaury Hanser
9 августа 2021 в 07:22
0

Я не знаю, какой миксин вы используете, но, вероятно, у вас может быть что-то вроде этого: &.isActive { @include tablet-up { width: calc(100vw - 500px) }}

Ответы (0)