Media запросы работают не корректно

129
05 декабря 2020, 10:40

Верстаю одностраничник, пытаюсь адаптировать под мобильные устройства.

Указываю медиазапросы.

Половина сайта работает корректно, вторая половина сайта, в обычном размере, стало отображать, только медиазапросы, основной css не видит. То есть при большом размере экрана, он отображает как для 960px.

Код в разных файлах, css в первом файле подключен, медиа во втором файле, то есть очередь подключения соблюдена.

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

.reviews { 
  background: #262626; 
  width: 100%; 
  height: 100vh; 
} 
 
.reviews h3, 
.map h3 { 
  text-align: center; 
  font-size: 45px; 
  color: #fff; 
  font-family: 'Vollkorn', serif; 
  text-shadow: 3px 3px 2px #000; 
  padding-top: 4vh; 
} 
 
.conteiner_rew { 
  width: 100%; 
  margin: 0 auto 0; 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  padding-top: 60px; 
} 
 
.conteiner_rew .box_rew { 
  position: relative; 
  width: 287px; 
  height: 290px; 
  background: #000; 
  margin: 10px; 
  box-sizing: border-box; 
  display: inline-block; 
} 
 
.conteiner_rew .box_rew .imgBox_rew { 
  position: relative; 
  overflow: hidden; 
  height: inherit; 
} 
 
.conteiner_rew .box_rew .imgBox_rew img { 
  max-width: 100%; 
  transition: transform 2s; 
} 
 
.conteiner_rew .box_rew:hover .imgBox_rew img { 
  transform: scale(1.2); 
} 
 
.conteiner_rew .box_rew .details_rew { 
  position: absolute; 
  top: 10px; 
  left: 10px; 
  bottom: 10px; 
  right: 10px; 
  background: rgba(0, 0, 0, .8); 
  transform: scaleY(0); 
  transition: transform .5s; 
} 
 
.conteiner_rew .box_rew:hover .details_rew { 
  transform: scaleY(1); 
} 
 
.conteiner_rew .box_rew .details_rew .content_rew { 
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  text-align: center; 
  padding: 15px; 
  color: #fff; 
} 
 
.conteiner_rew .box_rew .details_rew .content_rew h2 { 
  margin: 0; 
  padding: 0; 
  font-size: 20px; 
  color: #ff0; 
} 
 
.conteiner_rew .box_rew .details_rew .content_rew p { 
  margin: 10px 0 0; 
  padding: 0; 
} 
 
@media only screen and (max-width: 960px) { 
  .conteiner_rew { 
    padding-top: 30px; 
    display: block; 
  } 
  .conteiner_rew .box_rew { 
    width: 287px; 
    margin-left: 15px; 
  } 
  .conteiner_rew .box_rew:nth-child(7) { 
    display: none; 
  } 
  .conteiner_rew .box_rew:nth-child(8) { 
    display: none; 
  } 
}
<section class="reviews" id="reviews"> 
  <h3>Отзывы</h3> 
  <div class="conteiner_rew"> 
    <div class="box_rew"> 
      <div class="imgBox_rew"> 
        <img src="img/ava4.jpg" alt=""> 
      </div> 
      <div class="details_rew"> 
        <div class="content_rew"> 
          <h2>Стройнова Наталья</h2> 
          <p>Прекрасная фирма.Очень корректгные и внтмательные сотрудники. Тур в Египет-цена, качество было оптимальное. Так держать. Спасибо.</p> 
        </div> 
      </div> 
    </div> 
    <div class="box_rew"> 
      <div class="imgBox_rew"> 
        <img src="img/ava2.jpg" alt=""> 
      </div> 
      <div class="details_rew"> 
        <div class="content_rew"> 
          <h2>Анастасия Клетова</h2> 
          <p>Была в этом году с ними в Турции, в Кермане. Все очень понравилось. Отель подобрали быстро, менеджер -девочка очень приветливая, напоила кофе, объяснила все подробно. Мне все понравилось!</p> 
        </div> 
      </div> 
    </div> 
    <div class="box_rew"> 
      <div class="imgBox_rew"> 
        <img src="img/ava3.jpg" alt=""> 
      </div> 
      <div class="details_rew"> 
        <div class="content_rew"> 
          <h2>Наталья Кутняк</h2> 
          <p>Выражаю благодарность турагенству Tours&Tickets за подбор тура в октябре 2017 в Шри Ланку. Менеджер Любовь учла все наши пожелания по перелету, отелю, пляжу, сопровождала нас дистанционно в течении отдыха. Мы отлично провели время, привезли 
            незабываемые впечатления.</p> 
        </div> 
      </div> 
    </div> 
    <div class="box_rew"> 
      <div class="imgBox_rew"> 
        <img src="img/ava5.jpg" alt=""> 
      </div> 
      <div class="details_rew"> 
        <div class="content_rew"> 
          <h2>Анжела Валентиновна</h2> 
          <p>Благодаря данному турагенству ездила в Таиланд! Получила море удовольствия и впечатлений! Спасибо Tour&Tickets за помощь! Отдельное спасибо менеджеру Юлии за помощь в выборе! Рекомендую всем!!!</p> 
        </div> 
      </div> 
    </div> 
    <div class="box_rew"> 
      <div class="imgBox_rew"> 
        <img src="img/ava6.jpg" alt=""> 
      </div> 
      <div class="details_rew"> 
        <div class="content_rew"> 
          <h2>Денис Радутный</h2> 
          <p>Ездили на отдых в Египет благодаря данному агенству! Всё очень понравилось! Начиная от выбора тура до окончания отдыха! Спасибо Tour&Tikets за отличное путешествие и море впечатлений!!! Будем обращаться к Вам всегда!</p> 
        </div> 
      </div> 
    </div> 
    <div class="box_rew"> 
      <div class="imgBox_rew"> 
        <img src="img/ava7.jpg" alt=""> 
      </div> 
      <div class="details_rew"> 
        <div class="content_rew"> 
          <h2>Надежда Игоревна</h2> 
          <p>Выбрала и не пожалела. Большое спасибо Юлии, отличный менеджер, очень контактная и терпеливая</p> 
        </div> 
      </div> 
    </div> 
    <div class="box_rew"> 
      <div class="imgBox_rew"> 
        <img src="img/ava8.jpg" alt=""> 
      </div> 
      <div class="details_rew"> 
        <div class="content_rew"> 
          <h2>Кристина Цуркан</h2> 
          <p>Обслуживание на высшем уровне! Советую всем, не пожалеете!!!!)</p> 
        </div> 
      </div> 
    </div> 
    <div class="box_rew"> 
      <div class="imgBox_rew"> 
        <img src="img/ava9.jpg" alt=""> 
      </div> 
      <div class="details_rew"> 
        <div class="content_rew"> 
          <h2>Ирина Карбовская</h2> 
          <p>Это агентство мне рекомендовали знакомые, а теперь я могу рекомендовать его своим друзьям. Огромное спасибо за отдых! Был супер подобран тур. Мне и ребенку очень понравился отель который нам предложила Юля. Были учтены все наши желания. Это 
            был рай для ребенка!!!Море положительных эмоций!! До встречи в новом году, я обязательно к вам приду.</p> 
        </div> 
      </div> 
    </div> 
  </div> 
</section>

Answer 1
<meta name="viewport" content="width=device-width, initial-scale=1">
READ ALSO
после нажатия alt , ctrl не отлавливает WPF

после нажатия alt , ctrl не отлавливает WPF

После нажатия Аlt, Ctrl не отлавливаетНужно ПРОСТО нажать Alt снова,чтобы CTRL снова начал отлавливать

131
Ошибка в работе с EditorUtility в Unity

Ошибка в работе с EditorUtility в Unity

Создал скрипт, который пользуется библиотекой UnityEditor и в нем используется класс EditorUtility, для вызова проводника, чтобы выдать путь к файлуВ...

88
C# передача делегата в качестве параметра метода

C# передача делегата в качестве параметра метода

Ошибка CS1061 "T" не содержит определения "CompareTo", и не удалось найти доступный метод расширения "CompareTo", принимающий тип "T" в качестве первого...

121
Чтение данных с NetworkStream C#

Чтение данных с NetworkStream C#

Пишу редактор кода на Windows Forms с возможностью следить за процессом написания с других компьютеровКогда клиент(писатель) пишет, каждое изменение...

126