Currently, I am facing an issue while working on a site plugin and trying to utilize CSS grid to showcase posts. Despite the media query being active according to the inspector, the modification in the template columns is not reflecting as expected.
Check out the site URL here:
Below is the snippet of CSS being used:
.post_holder {
max-width: 100% !important;
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 56px 24px;
margin: 24px;
}
@media only screen and (max-width: 1351px) {
.post_holder {
grid-template-columns: auto auto auto;
}
}
Inspecting the element reveals the active rules, as seen here: https://i.sstatic.net/jDE8N.jpg
Typically, altering template columns through media queries has worked for me in the past. I am unsure why this particular code is not showing the desired outcome.