Я работаю с сеткой, и по какой-то причине использование max-width в медиа-запросе, похоже, ничего не делает.код ниже:
код:
body {
color: #fff;
text-align: center;
}
#content {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 1rem;
grid-template-areas: 'header header header header' 'block_1 block_1 block_2 block_2'
}
@media only screen and (max-width:700px) {
#content {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 1rem;
grid-template-areas: 'header' 'block_1' 'block_2'
}
}
#content>* {
background-color: #fff;
border: 1px solid black;
}
.header {
grid-area: header;
height: 150px;
}
.block_1 {
grid-area: block_1;
height: 150px;
}
.block_2 {
grid-area: block_2;
height: 150px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="master.css">
</head>
<body>
<div id='content'>
<div class='header'>Header</div>
<div class='block_1'>Header</div>
<div class='block_2'>Header</div>
</div>
</body>
</html>
Я ожидаю, что 2 класса блоков будут располагаться друг над другом на 699 пикселей и ниже.Однако они, похоже, не хотят этого делать.