Почему не срабатывает медиа правила для блока?

Question

[Ivan Vasilievich]

Добрый день всем!
Столкнулся с такой проблем, пытаюсь за адаптировать сайт под мобильные устройства, но в блоки Media правило зачеркнутые"невозможно применить"

.consultation {
		
		padding: 45px 20px 80px 20px;
	}

Но когда для провела я прописываю !important, все нормально отрабатывает.



Могу ли я злоупотреблять с этим значением" !importan"???

Comments

[Одиночка Айс]

Злоупотреблять (да и вообще использовать нежелательно) нельзя. Скорее всего, у вас медиа запрос находится выше, чем основной стиль, поэтому перебивается. Попробуйте на время отключить минификацию css и посмотреть на каких строчках стили находятся.

[Антон Литвиненко]

У вас точно медиазапросы идут после обычных стилей?ощущение что наоборот, оттого и перебивает

[Ivan Vasilievich]

Антон Литвиненко, Сперва я создал файл (_consultation.scss) в нем прописал все необходимые свойства и здесь всё работ.
После этого я этот файл заимпортировал в (style.scss ) Dmitrijs Balcers 'blocks/consultation';
Дальше я создаю файл(_media.scss) для адаптивной вёрстки и вот здесь начинается конфликт.
Некоторые блоки нормально срабатывают, но не все. Срабатывает конфликт между .consultation и media, ну как его перебить?

[Антон Литвиненко]

Lebed_Sergey, для начала глянуть в каком порядке компилит неминифицированный файл

Answer 1

[Smirator]

Использование !important - это плохая практика. Вам нужно пользоваться специфичностью. "Перебить" конфликтующий стиль.
Я не вижу полной картины с вашими стилями. Специфичность должна быть примерно такой:

section.consultation {
    padding: 45px 20px 80px 20px;
  }

В идеале, если вы укажите еще родителя для элемента section. Разумеется, это работает и для медиа.

Почитать подробно можно тут: https://developer.mozilla.org/ru/docs/Web/CSS/Spec...

Comments

[Ankhena]

Нет смысла повышать специфичность.
Достаточно равной и правильного порядка подключения @media.

Если на каждом шаге повышать, то до !important дело и в правду дойдет довольно быстро.

[Ivan Vasilievich]

Ну как описывает правило "Если у нескольких правил специфичность одинакова, то к элементу применяется последнее по порядку правило CSS"
У меня специфичность для блока одинакова, но для последнего должен сработать последний.
В media (max-width: 992px) для блока "promo padding: 20px" здесь всё отработало без проблем, а вот для блока consultation нет!
В чём подвох? Заранее спасибо всем за помощь.

<section class="consultation">
		<div class="container">
			<h2 class="title title_left">
				Получите бесплатную консультацию<br>
				по подбору пульсометра
			</h2>
			<div class="consultation__descr">
				Просто заполните форму заявки<br>
				и мы перезвоним вам в течении 10 минут
			</div>
			<form id="consultation-form" class="feed-form" action="#">
				<input name="name" required placeholder="Ваше имя" type="text">
				<input name="phone" required placeholder="Ваш телефон">
				<input name="email" required placeholder="Ваш E-mail" type="email">

				<button class="button button_submit">заказать кОНСУЛЬТАЦИЮ</button>
			</form>
		</div>
	</section>

@media (max-width: 992px) {
	.promo {
		padding: 20px;
		&__header {
			display: block;
			font-size: 30px;
			font-weight: 600;
		}
	}
	.button {
		&_main {
			width: 230px;
		}
	}
	.promo__link {
		font-size: 15px;
	}

	.advantages {
		padding: 40px 0 55px 0;
		&__wrapper {
			padding: 20px;
		}
		h2.title {
			font-size: 28px;
			font-weight: 600;
		}
		&__item {
			margin: 5px;
		}
		&__descr {
			font-size: 13px;
			font-weight: 550;
		}
	}

	.consultation {
		padding: 45px 20px 80px 20px;
		
	}
	
}