I'm working on a challenge that 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 has 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 screen resolutions it doesn't take effect.

If you want to check out 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：

Your original rule is more specific:

main .grid-container { ... }

beats this one

@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).

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