Search code examples
htmlcsswordpresswordpress-plugin-creation

CSS grid-template-columns not changing even though code is active in media query

Hello I am working on a site plugin and I am having some issues using css grid to display these posts. Its a simple grid-template-columns change using media queries. The inspector says that my media query is active, but the actual change in the template columns is not rendering.

Here is the site url: https://texas.momcollective.com/specific-post-testing/

Here is the css:

.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;
    }
}

And here is what the inspector is saying about which rules are active:

enter image description here

I've always changed the template-columns using media queries; I'm not sure why this particular code isn't displaying

Solution

  • You have grid-column: 1 / 5 applied to .site_url. But you don't override this to 1 / 4 when you reduce the number of columns in your media query.

    This forces creation of implicit grid to span this grid item to 4 columns as specified.

    There is a better way to do full width elements in grid that circumvents this issue. Use grid-column: 1 / -1 instead. This tells the grid item to start at first grid line from the left to the last grid line on the right.