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 Chrome Dev tool same for both screen size >493px and <493px