Почему не работает @Media Queries?

Question

[Рахэб Ватаниар]

Мой style.less файл, не могу понять почему все стили в брейкпоинтах перечеркнуты.
(впервые юзаю less)
https://github.com/Pholish/web/blob/master/time%20...

Comments

[Ankhena]

Ой
Селекторы из 8(!!!) вложенностей?

.wrapper footer .footer-wrapper .footer-block form .form-field .form-field-email

.wrapper footer .footer-wrapper .footer-block .social li a .fa

Вам бы пересмотреть взгляд на верстку.

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

[Ankhena]

Зачем вы перебиваете одни и теже свойства по 100 раз.

К примеру вот это не меняется и остается неизменным на любой ширине.

.wrapper footer .footer-wrapper .footer-block form .form-field .form-name {
    width: 100%;
    line-height: 45px;
    padding-left: 20px;
  }

Вы же это повторяете 12 раз. Зачем?? Чтобы браузер развлекся?

И !important уберите.

Теория такая:
Выбираете направление, mobile-first или в обратную сторону. Тут кто как любит.
Пишете основные стили и потом пишете в media условия только либо максимальную либо минимальную ширину, в зависимости от предыдущего выбора. И указываете только изменяющиеся свойства.

Answer 1

[Froggyweb]

не знаю, все работает
media screen and (max-width: 720px) and (min-width: 321px)
style.css:807
.wrapper .container {
max-width: 720px !important; - это жесть!
margin: 0 auto;

Почитай про mobile first снимет много проблем.
селекторы просто ужасны изменить стиль у которого зада три класса? - жесть.
зачем задавать такое? я молчу про БЭМ. просто задай себе вопрос. верстка должна быть гибкой, сегодня одно, завтра - другое. может быть и одно и другое.

адаптив пока дело десятое.

Comments

[Рахэб Ватаниар]

так в смысле, без !important оно не хочет юзатся
критика это хорошо
ток где 3 класа , у какого селектора?
я писал вроде везде по 1-2 класса максимум для каждого селектора

[Ankhena]

Pholish:

ток где 3 класа , у какого селектора?

Какие 3, там даже по 8 есть.