Не работает атрибут @media?

Question

[nikoosya]

Здраствуйте. Не работают стили через атрибут media для блока. Для других блоков все прекрасно работает, но для .header нет. Вот html:

<div class="header">
		<div class="container">
			<div class="header__content">
				<div class="row">
					<div class="text col-xl-5">
						<h2 class="title">Никита Шелудько</h2>
						<h3 class="title">Никита Шелудько</h2>
						<p class="subtitle">Веб-разработчик, верстальщик, веб-дизайнер</p>
					</div>
					<img src="img/me.png" alt="" >
				</div>
			</div>
		</div>
	</div>

css:

@media screen and (max-width: 840px) {
	.header{
		background:red;
                 .header__content{
		.text{
                font-size: 2em;
                }
	        }
                }

Если что, пишу на Scss. Подскажите, в чем проблема?

Answer 1

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

Заверни media в .header.

.header {
   @media (max-width: 840px) {
      /*стили для header*/

Компилятор сам соберет так, как должно быть.

На счет синтаксиса не уверен, я на Sass пишу, с SCSS уже пару лет не работал.

Comments

[nikoosya]

спасибо, но не помогло

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

nikoosya, тогда проблема не на поверхности. Скажи:
1. Не пытаешься ли ты вдруг SCSS файл подключить прямо в браузер?
2. Если нет, то как именно ты его обрабатываешь: плагином IDE или конфигом для, скажем, gulp?
3. И если последний, то какие ошибки он тебе выбрасывает.
4. А если не выбрасывает, то какой конечный CSS?

Ну и на сладенькое — запили демку на https://codepen.io/.

[nikoosya]

1. Нет, компилирую и подключаю css
2. Компилятором Koala
3. Ошибок никаких нет
Понимаешь, дело в том, что медиа например для других блоков работают отлично. Но конкретно для этого проблема. Но все же он и для этого блока иногда работает, но только при определенных расширениях. Я не понимаю как и что это, но все же.
Запилить не могу к сожелению, так как там не получится увидеить то, как должен этот запрос работать. Но спасибо за помощь!

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

nikoosya, у тебя условие для экранов меньше 840px на codepen они отлично срабатывают.

[nikoosya]

Арсений Матыцин, там же вроде нельзя менять ширину, а только высоту. или я калич))

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

nikoosya,

У меня для тебя плохие новости. Помимо прочего браузер можно снять с закрепа и изменить ему размер. Таким образом изменяя и область рендера верстки. Или эмуляцию подрубить.

Answer 2

[drawnofmymind]

1 ну явно что-то с отступами
2 Sass пишется без скобок,ты имел ввиду scss?
попробуй обратится к &__content
Ну это сразу что в глаза кинулось
не хватает закрывающиеся фигурной скобки

Comments

[nikoosya]

блин, перепутал, точно. вставил не правильно и отступы полетели. Не помогло. Тем более мне нужно и с самим header работать. Но спасибо)

[drawnofmymind]

Используй всю силу scss, вложенность через амперсанд крутая штука

[nikoosya]

drawnofmymind, спасибо. забываю часто о ней. да и как-то читать легче, когда так рассписано