Не работает медизапрос. В чем проблема?

Question

[garyk5]

Здравствуйте, не пойму почему не работает медиазапрос. Направьте пожалуйста на путь истинный, полдня проковырялся :)

@media screen and (max-width: 1080px) { 
    
    .wrapper, .conteiner, .conteiner2 {width: 850px;}  
}

Ставил ещё так:

@media screen and (max-width: 1080px) {
            .conteiner2 {width: 850px; height: 100%;}
}

Дано: по-умолчанию обертка conteiner2 (940px)

Задача: сделать conteiner2 на разрешении с 1080px и меньше - 850 px.

Проблема: через "Просмотр элементов" в коде - работает данная конструкция для всего сайта. Когда вставляю и сохраняю в CSS-файл для данного разрешения - нет. Где-то причина в прописанном медиазапросе.

Viewport есть:

<meta name="viewport" content="width=device-width, initial-scale = 10">

Пробовал ставить:

<meta name="viewport" content="width=device-width, initial-scale = 1">

- Не помогло.

Панель CSS в инспекторе при разрешении 1080px:
Сама иерархия в CSS по этим оберткам:
Структура HTML в этом участке:

Comments

[Ankhena]

Извините за банальный вопрос, порядок в CSS файле правильный для обычных правил и media?

[Сергей]

initial-scale = 10 Почему 10?

[devstudent]

Сергей: вот именно , почему? тоже интересно

[devstudent]

может быть много причин, надо видеть разметку, и стили, может его что-то перебивает , что говорит консоль, на вообще видит эту запись?

[Сергей]

devstudent: initial-scale = 1 поставьте

[devstudent]

Сергей: не по адресу

[Сергей]

devstudent: Извините)

[Ankhena]

"Панель CSS в инспекторе при разрешении 1080px:"
а при 1079?

Выложите код на codepen.io или jsfiddle.net

[garyk5]

Ankhena W: codepen.io/Garyk5/pen/LRxOOA

[Ankhena]

garyk5: ответ ниже, вставите в нужное место потерянную } и все заработает.

Answer 1

[Ankhena]

Ну вот, после того, как выложили весь код:

1. Простая проверка: поиск { и } показала, что открывающих скобочек 911, а закрывающих 909.
Думаю, что если найти плохозакрытые куски кода, то все заработает.

Часть скобок нашлась в закомментированном кусочке.
А вот тут потерялась закрывашка

строчка 2511

.seo-price-high .seo-price-tag {
  background-color: #ff9262;

.seo-price-tag b {
  margin-left: 10px;
  font-size: 42px;
  font-weight: 900;
}

2. странная конструкция 246 строчка

.conteiner-headtext img src="http://semget.com/wp-content/themes/semget/images/seo-big.png" 
{ float: right; margin-right:-190px; }

3. точки с запятыми, 1253 строчка

.home .opacity-line { 
position: absolute; 
top: 0; 
left;
 0;
 width: 100%; 
height: 50px; 
background: url("../images/opacity2.png"); z-index: 10; 
}

Напрашивается вывод: задуматься, а в чем это Вы таком пишете CSS, что они так страшно выглядят и что редактор цветом не подсвечивает ошибки. И не пора ли сменить ПО.

Answer 2

[garyk5]

Всё равно не работает.

Пробовал следующий эксперимент: стили вставлял в head (HTML):

<style>
        body, html{width: 100%; height: 100%; margin: 0}
        .wrapper{width:940px; height:100%; margin: 0 auto}
        .conteiner, .conteiner2{width:940px; height:50%; margin: 0 auto}
        .conteiner{background: black}
        .conteiner2{background: green}
        @media screen and (max-width: 1080px) { 
            .conteiner2 {width: 850px; height: 100%; background: blue}
        }
    </style>

Итог: сработало. Правда с небольшим косяком (как линия появилась). Но это не выход пихать все медиазапросы в вверх страницы.

Не работает: в CSS всё равно не работает. Перепробовал чуть ли не все возможные селекторы. Вставлял и вверх и вниз. Не работает.

Comments

[Ankhena]

Смотрите в инспектор кода, кто перебивает.
Либо делитесь ссылкой на код.