CSS Grid, Some Media Queries Not Applying

Question

I have a page consisting of a number of CSS Grids. The grid I am having trouble with is this one:

<div class="grid-two">

        <div class="list">

            <h1>Featured Opportunities</h1>

            <ul>

                ...

            </ul>

        </div>

        <div class="info">

            <div class="hand-logo">

                ...

            </div>

            <div class="info-right">

                ...

            </div>

        </div>

    </div>

The following CSS applies to the outer div - grid-two and then the second internal div info :

div.grid-two {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

div.grid-two div.info {
    display: grid;
    text-align: center;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

The following media query is applying successfully, turning the outer div into a single columned grid:

@media only screen and (max-width: 980px) {
    div.grid-two {
        grid-template-columns: 1fr;
    }
}

The following is NOT applying. I can't see it in the inspector, but when I view the source, the media query is showing so it's not a caching issue.

@media only screen and (max-width: 700px) {
    div.grid-two div.info {
        grid-template-columns: 1fr;
    }
}

I have tried a number of things - I tried enclosing the standard styles for this in a media query using min-width and then using this side by side so that it had "under and over" styles. It STILL picked up styles from the min-width query, even when the browser is resized to iPhone size. I'm getting quite annoyed that this works so well on the one grid but not at all on the internal grid.

Link for clarity

The two images below - the first is how it currently looks, the rule is not applying at all or showing in the inspector. The second image - this is how I would like it to look below 700px, this was achieved by unticking the grid-template-columns within the inspector.

Answer 1

Maybe you did forget to add the Viewport meta? Since I tried to replicate the behaviour and had no trouble with your code.

<meta name="viewport" content="width=device-width, initial-scale=1">