Медиа запрос не работает
Здравствуйте, начал недавно учиться делать адаптивные сайты, но у меня почему то не работает медиа-запрос
1234567891011121314151617181920212223242526272829303132333435
<section>
<div class="container">
<div class="content-top">
<div class="content-item">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Alias soluta iste incidunt, amet dolore praesentium totam
ad suscipit consectetur inventore nobis vel, consequatur
impedit dignissimos minima expedita ipsum. Ipsum delectus
sed non repudiandae rem repellendus similique, perspiciatis
error ratione hic sint et earum fuga quidem! Sit officiis
totam, molestiae veniam porro repudiandae reprehenderit sunt
sapiente odio, nulla deserunt laborum cumque minus consequuntur.
Cupiditate magnam id officiis vero ipsum hic quia!
</p>
</div>
<div class="content-item">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Alias soluta iste incidunt, amet dolore praesentium totam
ad suscipit consectetur inventore nobis vel, consequatur
impedit dignissimos minima expedita ipsum. Ipsum delectus
sed non repudiandae rem repellendus similique, perspiciatis
error ratione hic sint et earum fuga quidem! Sit officiis
totam, molestiae veniam porro repudiandae reprehenderit sunt
sapiente odio, nulla deserunt laborum cumque minus consequuntur.
Cupiditate magnam id officiis vero ipsum hic quia!
</p>
</div>
</div>
</div>
</section>
123456789101112131415161718192021222324252627282930313233343536373839404142
main {
font-family: Arial, Helvetica, sans-serif;
.container {
//padding: 20px 0 0 0;
max-width: 1200px;
margin: auto;
.content-top {
display: flex;
justify-content: space-between;
align-items: center;
.content-item {
width: 30%;
background-color: brown;
color: white;
padding: 15px;
h1 {
text-align: center;
padding: 0 0 10px 0;
}
}
}
.content-bottom {
margin: 40px 0 0 0;
display: flex;
justify-content: space-between;
align-items: center;
.content-item {
width: 48%;
padding: 20px;
background-color: brown;
color: white;
h1 {
text-align: center;
padding: 0 0 10px 0;
}
}
}
}
}
123456
@media (max-width:1200px) {
.container {
max-width: 970px;
}
} Только авторизированные пользователи могут оставлять свои ответы
Дата
Популярность
В head добавь эту строку кода <meta name="viewport" content="width=device-width, initial-scale=1.0">
Вместо @media (max-width: 1200px) попробуй прописать @media screen and (max-width: 1200px). Чтобы проверить работает ли медиа запрос, лучше установить такие стили которые видны сразу на глаз, к примеру попробуй задать body другой фон и тогда будет видно работает ли медиа запрос или нет.
Что должно работать, где и как?
З.Ы. как вариант прописать:
@media (max-width:1200px) {
.container p{
max-width: 970px;
}
}