Не применяется css свойство от @media, что делать?

Question

[Dmasgj]

Прописал свойство:

@media (max-width: 1200px)
    .menu
        &_item
            padding-right: 20px
        &_link
            font-size: 13px

При ширине до 1200px отступы у айтемов должны быть 20px вместо 28px, а размер шрифта у ссылок должен изменятся с 15px на 13px, но этого не происходит. В инспекторе кода данные свойства перечёркнуты.

Comments

[Ankhena]

В инспекторе кода данные свойства перечёркнуты.

На вкладке Computed можно посмотреть чем они перебиваются и почему.
Скорее всего неверный порядок подключения media

[Dmasgj]

Ankhena, Они перебиваются свойствами заданными изначально, в Computed выдало это:

15px .menu .menu_link---(Свойство заданное изначально)
13px .menu_link----(Свойство которое должно примениться, но не применяется)

вот кусок html кода

<ul class="menu">
          <li class="menu_item"><a href="#" class="menu_link">Главная</a></li>
          <li class="menu_item"><a href="#" class="menu_link">Со своим автомобилем</a></li>
          <li class="menu_item"><a href="#" class="menu_link">На автомобиле компании</a></li>
          <li class="menu_item"><a href="#" class="menu_link">Требования</a></li>
          <li class="menu_item"><a href="#" class="menu_link">Контакты</a></li>
          <li class="menu_item"><a href="#" class="menu_link">Оставить заявку</a></li>
        </ul>

[Ankhena]

Dmasgj, вот и смотрите что у вас со сборкой, что media оказались выше основных.

Answer 1

[Арсений Матыцин]

В инспекторе кода данные свойства перечёркнуты.

Если свойства перечеркнуты, значит другие, которые его перебивают, не перечеркнуты. Посмотри в инспекторе, какие именно свойства перекрывают эти, там будет указан селектор.

Если можешь, переделай логику специфичности\каскадности. В первом случае может быть другое правило, которое важнее, или ниже по коду идти такое же правило с другими свойствами.

Comments

[Dmasgj]

Вот так записаны свойства css(sass)

.menu
  display: flex
  justify-content: space-between
  padding: 13px 70px
  margin: 0
  list-style-type: none
  &_link
    font-size: 15px
    font-weight: 300
    font-stretch: normal
    font-style: normal
    letter-spacing: normal
    text-align: left
    color: #fff
  &_item
    border-right: 2px dotted black
    padding-right: 28px

[Арсений Матыцин]

Dmasgj, изоляция одного куска кода мне ничего не даст, а рецепт, как бороться, описан мною выше. Если термины не знакомы, приглашаю в поисковую систему для ознакомления.

[Dmasgj]

Арсений Матыцин, Может ли быть проблема в том что главное css правило у меня находится в файле _general.sass, а медиа запросы в файле _media.sass, в инспекторе приоритетность у файла _general.sass выше, уже в двух местах пытаюсь применить медиа запросы, так и не выходит(

[Dmasgj]

Арсений Матыцин, О, нашел решение, оказалось, что в файле style.sass не правильно вписал название подключаемого файла Dmitrijs Balcers , но всё-равно, спасибо большое за помощь

Answer 2

[Dutt Dett]

Попробуйте сделать так:

@media (max-width: 1200px)
    .menu
        &_item
            padding-right: 20px !important
        &_link
            font-size: 13px !important

Comments

[Арсений Матыцин]

Очень плохой совет.