Не реагирует на изменение media стилей. В чем ошибка?

Question

[flare0n]

Хочу изменить величину заголовков (оранжевый текст), в ответ - ноль реакции. Хоть 10000rem ставь, он берет стили, установленные по умолчанию.

Плюсом в devTools пишет подобную ошибку. В ней говорится, что в 17 строку внесена следующая:

document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.0'><\/script>".replace("HOST", location.hostname));

Кусок

HTML кода:

<section class="features">
	 	<div class="container">
	 		<div class="features__block">
		 		<div class="row">
		 			<div class="col-4">
		 				<h3>5 лет</h3>
		 				<p>На рынке изделий из гофрокартона</p>
		 			</div>
		 			<div class="col-4">
		 				<h3>до 5 000 000 м<sup>2</sup></h3>
		 				<p>Ежемесячный объем производства гофрокартона</p>
		 			</div>
		 			<div class="col-4">
		 				<h3>4 000 м<sup>2</sup></h3>
		 				<p>Площадь склада</p>
		 			</div>
		 		</div>
	 		</div>

		<div class="row align-middle">
			<div class="col-4">
				<div class="features__adv">
					<div class="media mr-3 d-flex">
						<img src="img/icon-1.svg" alt="icon-1" class="align-self-center">
						<div class="media-body">
								<h4>Производство</h4>
								<p>4 технологические линии способны выполнить любой заказ любой сложности</p>
							</div>
						</div>
				</div>
			</div>
			<div class="col-4">
				<div class="features__adv">
					<div class="media mr-3 d-flex">
						<img src="img/icon-2.svg" alt="icon-2" class="align-self-center">
						<div class="media-body">
								<h4>Бесплатные образцы</h4>
								<p>Бесплатно делаем образцы гофроупаковки - это помогает заранее увидеть упаковку</p>
						</div>
					</div>
				</div>
			</div>
			<div class="col-4">
				<div class="features__adv">
					<div class="media mr-3 d-flex">
						<img src="img/icon-3.svg" alt="icon-3" class="align-self-center">
						<div class="media-body">
								<h4>Стабильное качество</h4>
								<p>Собственная лаборатория контролирует качество на каждом этапе производства</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row align-middle mb-0">
	<div class="col-4">
		<div class="features__adv">
			<div class="media mr-3 d-flex">
				<img src="img/icon-4.svg" alt="icon-4" class="align-self-center">
				<div class="media-body">
						<h4>Страховой запас</h4>
						<p>Можем хранить запас гофропродукции на своих складах и поставлять его партиями</p>
				</div>
			</div>
		</div>
	</div>
		<div class="col-4">
			<div class="features__adv">
				<div class="media mr-3 d-flex">
					<img src="img/icon-5.svg" alt="icon-5" class="align-self-center">
					<div class="media-body">
							<h4>Флексопечать</h4>
							<p>Возможно нанесение вашего  логотипа, текста или манипуляционных знаков</p>
					</div>
				</div>
			</div>
		</div>
			<div class="col-4">
				<div class="features__adv">
					<div class="media mr-3 d-flex">
						<img src="img/icon-6.svg" alt="icon-6" class="align-self-center">
						<div class="media-body">
								<h4>Гидрофобные добавки</h4>
								<p>На производстве реализована технология, которая позволяет гофрокартону стать прочнее</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	 </div>
	 </section>

Comments

[Сергей delphinpro]

Нафига здесь html код, когда речь идет о стиля?
Нафига в коде выложено шесть, мать их, одинаковых блоков? Вы думаете, если выложите только один, это на что-то повлияет? (Мораль: не надо бессмысленных простыней кода)
Почему бы вместо непонятных скриншотов не сделать воспроизводимую проблему в любой песочнице и не дать ссылку на нее?

[be_a_man]

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

[flare0n]

Сергей delphinpro, be_a_man, https://github.com/Flareonn/goodCardboard.git

[Владислав Лысков]

document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.0'><\/script>".replace("HOST", location.hostname));

ты сам тут ничего не замечаешь?

[flare0n]

Владислав Лысков, Нет, серьезно. Я только учусь...

[Владислав Лысков]

flare0n, ну посмотри на закрывающий тэг, а дальше вообще билиберда, ты хочешь что-то на что заменить, но это никак не попадает в js код

[flare0n]

Владислав Лысков, Так в самом файле у меня нет этой строчки, что странно - я заменил тэг
<h4></h4> на <h2></h2> и заголовки теперь отзываются на изменения

[Амир Алимжанов]

Как я понял это сборка на галп с browserSync? По стилям, проверь сам .css файл, может нет стилей, может sass не скомпилился

[flare0n]

Амир Алимжанов,
Вот, все компилится, но заголовок попросту отказывается реагировать. Для наглядности крашу оба в красный.

Куски кода

Пробельчик

К слову, если это хоть как-то поможет, к html подключена библиотека bootstrap-grid.min.css

[Амир Алимжанов]

flare0n, кинь весь код сюда(html,css,sass,js)
или залей все на jsbin и ему подобные сервисы, а то так по скринам это гадание на кофейной гуще

[flare0n]

Амир Алимжанов, Сверху есть ссылочка на github. там весь scr

[Амир Алимжанов]

flare0n, сорри, с мобилу сижу, моя невнимательность

[flare0n]

Амир Алимжанов, Буду благодарен, если дополнишь критикой по самому коду в html, учусь еще...

[Амир Алимжанов]

flare0n, завтра с компа гляну, а щас посмотри ты случайно не увеличил или не уменьшил масштаб окна браузера? Ctrl+ "+" или "-" нажми

[flare0n]

Амир Алимжанов, так что?

[Амир Алимжанов]

flare0n, смотри, у тебя медиа media (min-width: 768px) and (max-width: 991) идет перед основными стилями, т.е. не работает потому что основные стили переопределяют, это раз. Второе, media screen and (min-width: 576px) and (max-width: 767px) в этом медиа у тебя только класс .main-img

[Амир Алимжанов]

flare0n, я был прав?

Answer 1

[flare0n]

Проблема решена. Оказывается gulp компилировал стили двух нижних блоков после скомпилированного media файла. (Как мне кажется, от сюда следует писать

@import media

@import 'header'
@import 'interface'
@import 'main'
@import 'reset'
@import 'modals'
@import 'features'
@import 'production'
@import 'media'

Именно последним в строке.

Comments

[Амир Алимжанов]

используй миксины sass для медиа и плагин gulp, который собирает все одинаковые.

Либо такой миксин

// BREAKPOINTS
=q($point)
	@if $point == lg
		@media screen and (max-width: 1400px)
			@content

	@else if $point == md
		@media screen and (max-width: 1199px)
			@content

	@else if $point == sm
		@media screen and (max-width: 991px)
			@content

	@else if $point == xs
		@media screen and (max-width: 767px)
			@content

	@else if $point == lmb
		@media screen and (max-width: 600px)
			@content

	@else if $point == smb
		@media screen and (max-width: 599px)
			@content

	@else if $point == mb
		@media screen and (max-width: 480px)
			@content

	@else if $point == smb
		@media screen and (max-width: 380px)
			@content

	@else if $point == xsmb
		@media screen and (max-width: 360px)
			@content

[flare0n]

Амир Алимжанов, Спасибо, можно статейку о том, для чего они вообще? Если не затруднит.

[Амир Алимжанов]

flare0n, ссылки не помню, можешь мой конфиг gulp попробовать, почитай sass mixins, да и вообще полезные миксины поищи.

[Амир Алимжанов]

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

.basket
		margin-bottom: 40px
		+q(xs) // фиксированный брейкпоинт
			margin-bottom: 10px
                +max(1024) // динамичный брейкпоинт
                        margin-bottom: 15px