Menu
I am working with grid, and for some reason, using max-width in the media query seems to do nothing. code below:
Code:
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>I expect the 2 block classes to stack on top of each other at 699px and below. However, they do not seem to want to do that.
980
You will also need to change grid-template-columns: repeat(1, 1fr); to make that grid take full 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(1, 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>
answered Sep 15 '25 12:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With