@media query Запросы, проблема с !important, что делать?

Question

[OldSchoolWeb]

Не могу никак победить медиа квери запросы. В общем суть такая:
пишу код destope first и начинаю адаптивить
1) на экране 1369 нормально - на 991 - ужастно
делаю медиа квери запросы. на 991 нормально , на 1369 принимаются стили 991
2) наоборот.
-
нативный код:

@media only screen and (max-width : 991px)
	.slider-wrapper
		.swiper_container-wrapper
			h2
				font-size: em(44pt)
				line-height: 46px
			p
				font-size: em(44pt)
				line-height: 46px
.window-1
	height: 1110px
	.grid-container
		float: left
		&:before
			height: 658px
		.swiper_window1-slider
			float: left
			width: 678px
			height: 600px
			.cloth_2
				left: 90px

так на 991 он нормально отображает контент, но на десктоп версии все ужастно выглядит т.к применяет значения именно этого запроса, а не родного который прописан в sass
1-ый скриншот , на пк

2-ой на 991 пикселях

3-ий скриншот без квери запросов на пк

Answer 1

[Сева]

Ну есть же не только max-width, но еще и min-width :)

Comments

[tommy_13]

дополню: и их можно сочетать

[OldSchoolWeb]

tommy_13: min-width будет в любом случае применять к себе стили, пробовал уже.
т.е min-width(768px) вставляю стили (max-width 991) так же вставляю те же стили, по логике вещей он должен только в этом диапозоне их применять, но на практике он их применяет еще и к основным значениям на экране ноутбука/пк

[tommy_13]

@media only screen and (min-width: 768px) and (max-width : 991px)  {}

OldSchoolWeb:

[OldSchoolWeb]

Да не получается, парни.
media only screen and (min-width: 768px) and (max-width : 991px)
.swiper_window1-slider
float: left
width: 678px
height: 600px
.cloth_2
left: 90px !important
media only screen and (min-width : 1200px)
.swiper_window1-slider
float: left
width: 678px
height: 600px
.cloth_2
left: 180px !important

он должен двигать картинку на 1200 на 180 пикслей, а принимает 90пикселей у таблицы на 991 пиксель. А если убрать импоратант у 990, то дизайн плывет и картинка скрывается за пределами, а если у 1200 убрать импортант 180 пикслей , то там плывет верстка на компе, а на планшете всё нормально

[Сева]

между 991 и 1200 нет пикселей? )

[OldSchoolWeb]

Сева: Всё разобрался. Не знаю почему, но закинул с родного sass файла стили изменяемые в media (min-width 1200) и добавил к ним импортант, а из родного удалил и всё заработало