ARTICLE AD BOX
I am working on a responsive page using Grid box. The grid columns should adapt to different devices. The Snippet below demonstrates my attempt.
Issue:
The resizing gets stuck at 500px width. Therefore, the @media for 480px devices (phones) never executes. I have tested this on Firefox and Chrome -- same results.
How do I get a predictable behaviour?
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
.container {
display: grid;
grid-template-rows: 1fr;
grid-template-areas: "area_a area_b area_c";
min-width: 320px;
transition: grid-template-columns 0.5s ease;
}
.mgn-1 {
grid-area: area_a;
background: yellow;
}
.content {
grid-area: area_b;
background: lightblue;
}
.mgn-2 {
grid-area: area_c;
background: yellow;
}
.container div {
font-family: sans-serif;
height: 100px;
overflow-x: hidden;
}
@media (min-width: 769px) {
.container {
grid-template-columns: 20% 60% 1fr;
}
}
@media (max-width: 768px) {
.container {
grid-template-columns: 20% 75% 1fr;
}
}
@media (max-width: 480px) {
.container {
grid-template-columns: 20px 1fr 20px;
}
}
<html>
<div class="container">
<div class="mgn-1"></div>
<div class="content"></div>
<div class="mgn-2"></div>
</div>
</html>
