Верстаю одностраничник, пытаюсь адаптировать под мобильные устройства.
Указываю медиазапросы.
Половина сайта работает корректно, вторая половина сайта, в обычном размере, стало отображать, только медиазапросы, основной 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>
<meta name="viewport" content="width=device-width, initial-scale=1">
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
После нажатия Аlt, Ctrl не отлавливаетНужно ПРОСТО нажать Alt снова,чтобы CTRL снова начал отлавливать
Создал скрипт, который пользуется библиотекой UnityEditor и в нем используется класс EditorUtility, для вызова проводника, чтобы выдать путь к файлуВ...
Ошибка CS1061 "T" не содержит определения "CompareTo", и не удалось найти доступный метод расширения "CompareTo", принимающий тип "T" в качестве первого...
Пишу редактор кода на Windows Forms с возможностью следить за процессом написания с других компьютеровКогда клиент(писатель) пишет, каждое изменение...