grid-columns inside media queries not working for html article element?

Question

Grid-columns doesn't seem to be working for my article element, but does for my nav.

CSS

/*sm-md*/
@media screen and (max-width:768px){
    .signup-btn, .login-btn{
        font-size: 1.4em !important;
    }
    .listitem{
        font-size: 1.7em !important;
    }
    nav{
        grid-column: 4/15;
    }
    article{
        grid-column: 4/17;
    }
}

article{
    grid-column: 2/10;
    height: auto;
    th: 100%;
    margin: 30px 0 0 0;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 20px 10px #0000001a;
    padding-inline: 30px;
}

nav{
    grid-column: 7/14;
    display: flex;
    width: 100%;
    justify-content: center;
}

Not sure what's the problem here?

<main class="grid-container main">
    <article class="grid-wrapper article">
        content
    </article>
    <aside class="grid-wrapper aside">
        content
    </aside>
</main>

Already searched documents and tried changing up things.

Answer 1

It looks like you are trying to superpose the article and the nav in a grid. grid-column is supposed to contain the starting column and the ending one. If the article is in grid-column: 2/10; once you declare grid-column: 7/14; for the nav it cannot still work if there are in the same grid. The nav in not shown in your html and the css is not helping that much without the classes declared like .grid-container or .main for example, so it's possible I misunderstood the configuration.

Also:

• the media query should be declared after your root css to not be replaced by it. <- this is probably your problem

article{ // default case
    grid-column: 2/10;
}

@media screen and (max-width:768px){
    article{
        grid-column: 4/17; // this override the previous definition if it matches the media query
    }
}

• th is not a css property.