I'm working on a challenge which is based on a grid container this grid contains 3 cards and they are displayed horizontally.

THE PROBLEM

I have a class called .grid-container which have these css properties display: grid; grid-template-columns: repeat(3, 1fr); so in my media query I did this:
@media only screen and (min-width: 320px) and (max-width: 900px) { .grid-container { display: flex; flex-direction: column;}}

As you can see I changed the grid to flex with column direction but when I change of screen resolutions it doesn't take effect.

If you want to checkout the site and source code:

Live site: https://themax370.github.io/3-column-card-component/
Repository: https://github.com/TheMax370/3-column-card-component

CodePudding user response：

You have to add main before .grid-container

@media only screen and (min-width: 320px) and (max-width: 900px) {
    main .grid-container {
        display: flex;
        flex-direction: column;
    }
}

CodePudding user response：

Your original rule is more specific:

main .grid-container { ... }

beats

@media only screen and (min-width: 320px) and (max-width: 900px) {
  .grid-container { ... }
}

every time, because media queries don't affect the specificity of rules, at all.

When two or more rules contradict for an element, the more specific one wins. That is the basic CSS mechanism.

So when using media queries, always make sure

1. that your media queries come after the original rules they are meant to overwrite (which you did);
2. that the rules you want to override have at least the same specificity as the original rules (which you failed in).