Not sure what is that I am doing incorrectly here. HTML seems fine, main CSS seems fine so does Media Query. But Why wont it override. Any suggestion is much appreciated.
First Media Query Works.
I’ve tried Increasing the Specificity by adding ID, repeating Class, Using Additional Classes.
Also tried to convert display:grid to flex. But none worked.
.prod-container{
max-width: 1100px;
margin: 50px auto 100px auto;;
display: grid;
justify-content: center;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.vertical{
grid-row: 1/3;
grid-column: 3/4;
}
@media screen and (max-width:1100px){
body {
width: fit-content;
}
}
@media screen and (max-width: 493px) {
.prod-container {
grid-template-columns:1fr ;
gap: 10px ;
justify-items: center;
}
.vertical{
grid-row: 1 ;
grid-column: 1 ;
}
.prod{
width: 80% ;
}
} <main class="prod-container">
<img class="prod" src="image/suits/p1.png">
<img class="prod" src="image/suits/p2.png">
<img class="prod vertical" src="image/suits/p3-vertical.png">
<img class="prod" src="image/suits/p4.png">
<img class="prod" src="image/suits/p5.png">
<img class="prod" src="image/suits/p6.png">
<img class="prod" src="image/suits/p7.png">
<img class="prod" src="image/suits/p8.png">
</main>Screenshot of HTML
Screenshot of CSS
Screenshot of Media Query
Screenshot of Chrome Dev tool same for both screen size >493px and <493px
New contributor
Axistus is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.