Is there anyone who can assist me with this issue? I have set up a CSS grid that works properly above 768px when the min-width is specified. However, as I scale below that threshold, the layout remains unchanged and the media tag doesn't seem to take effect. If I switch from min-width to max-width, the formatting is correct for screens below 768px but not for those above that size.
HTML
<html>
<head>
<title>Responsive Design with CSS Media Queries</title>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="grid-container">
<div class="grid-item-1"></div>
<div class="grid-item-2"></div>
<div class="grid-item-2"></div>
<div class="grid-item-2"></div>
<div class="grid-item-2"></div>
<div class="grid-item-3"></div>
<div class="grid-item-4"></div>
<div class="grid-item-5"></div>
<div class="grid-item-6"></div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
font-family: sans-serif;
font-weight: lighter;
}
@media (min-width: 769px) and (max-width: 1920px){
.grid-container{
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 3px 3px;
}
.grid-item-1{
height: 100px;
background-color: #F5C6D6;
grid-column: 1/5;
}
.grid-item-2{
height: 100px;
background-color: #EE2E84;
}
.grid-item-3{
height: 100px;
background-color: #85CFD8;
grid-column: 1/3;
}
.grid-item-4{
height: 100px;
background-color: #85CFD8;
grid-column: 3/5;
}
.grid-item-5{
height: 100px;
background-color: #8DC63F;
grid-column: 1/4;
}
.grid-item-6{
height: 100px;
background-color: #E76E34;
}
}
@media only screen and (max-width: 768px){
.grid-container{
display: grid;
grid-template-columns: 100%;
grid-gap: 3px 3px;
}
.grid-item-1{
height: 100px;
background-color: #F5C6D6;
grid-column: 1/2;
}
.grid-item-2{
height: 100px;
background-color: #EE2E84;
grid-column: 1/2;
}
.grid-item-3{
height: 100px;
background-color: #85CFD8;
grid-column: 1/2;
}
.grid-item-4{
height: 100px;
background-color: #85CFD8;
grid-column: 1/2;
}
.grid-item-5{
height: 100px;
background-color: #8DC63F;
grid-column: 1/2;
}
.grid-item-6{
height: 100px;
background-color: #E76E34;
grid-column: 1/2;
}
}
https://i.stack.imgur.com/2PTA4.png