Почему перестают работать стили в media запросе?

Question

[JordanBelford]

Здравствуйте! Решил модернизировать не много код scss, начал с вложенности, но столкнулся с такой проблемой, стили в media запросах начинают переаттестовать работать. В чем мб проблема?

<header class="header">
	<div class="container">
		<div class="header__body">
			<a href="" class="header__logo">
				<img src="img/header/nav/logo.png" alt="">
			</a>
			<div class="header__burger"><span></span></div>
			<nav class="header__menu">
				<ul class="header__list">
					<li><a href="" class="header__link">Home</a></li>
					<li><a href="" class="header__link">About</a></li>
					<li><a href="" class="header__link">Pricing</a></li>
					<li><a href="" class="header__link">Our drones</a></li>
					<li><a href="" class="header__link">Our realizations</a></li>
					<li><a href="" class="header__link">Contact</a></li>
				</ul>
			</nav>
		</div>
	</div>
</header>

@import "nulling-style.scss";

//position

%pos-fixed {
	position: fixed;
	top: 0;
	left: 0;
}
%pos-absolute {
	position: absolute;
	top: 0;
	left: 0;
}
%pos-relative {
	position: relative;
	top: 0;
	left: 0;
}

//fonts

$font-main: Arial, "Helvetica Neue", Helvetica, sans-serif;


body {
	font-family: $font-main;
	font-weight: 400;
}

img {
	max-width: 100%;
}

.wrapper {
	& .container {
		max-width: 1356px;
		margin: 0 auto;
		padding: 0 20px;
	}
	& .header {
		@extend %pos-fixed;
		width: 100%;
		z-index: 50;
		& :before {
			content: '';
			@extend %pos-absolute;
			width: 100%;
			height: 100%;
			background-color: #888;
			z-index: 2;
		}
		& .header__body {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80px;
			& .header__logo {
				z-index: 2;
			}
			& .header__burger {
				display: none;
			}
			& .header__menu {
				& .header__list {
					display: flex;
					position: relative;
					z-index: 2;
					& .header__link {
						font-size: 18px;
						color: #fff;
						line-height: 24px;
						margin: 0 0 0 33px;
					}
				}
			}
		}
	}
}


@media (max-width: 1140px) {
	body.lock {
		overflow: hidden;
	}
	.header__burger {
		display: block;
		position: relative;
		z-index: 3;
		top: 0;
		left: 0;
		width: 30px;
		height: 20px;
	}
	.header__burger span {
		position: absolute;
		top: 9px;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #fff;
		transition: all 0.3s ease 0s;
	}
	.header__burger:before,
	.header__burger:after {
		content: '';
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #fff;
		transition: all 0.3s ease 0s;
	}
	.header__burge:before {
		top: 0;
	}
	.header__burger:after {
		bottom: 0;
	}
	.header__burger.active:before {
		transform: rotate(45deg);
		top: 9px;
	}
	.header__burger.active:after {
		transform: rotate(-45deg);
		bottom: 9px;
	}
	.header__burger.active span {
		transform: scale(0);
	}
	.header__menu {
		position: fixed;
		top: -100%;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #777;
		overflow: auto;
		padding: 100px 0 0 0;
		transition: all 0.4s ease 0s;
	}
	.header__menu.active {
		top: 0;
	}
	.header__list {
		display: block;
	}
	.header__list li {
		margin: 0 0 30px 0;
	}
}

Comments

[Andrew]

Вылейте код в песочницу.

Answer 1

[WapSter]

Ты увеличил вес селекторов своей вложенностью, это все равно, что прописать !important. Селектор медиа запроса должен быть таким же как и селектор основной верстки.

.box .link { color: #000; }
@media (max-width: 720px) { 
   .box .link { color: red; } 
}

Answer 2

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

Основная задача медиазапросов — переставать работать [выключать CSS] в тех или иных условиях.