Grid won't stack columns when resizing using media query

Question

My Grid won't stack columns when resizing below 500px using media query. My goal is to have the columns stack and center after resize so it can be mobile friendly. I know the current media query is working because the background changes to teal when it is below 500px but the grid does not change to the way I am expecting it to.

body {
  margin: 0;
}

img {
  max-width: 100%;
}

ul {
  list-style: none;
}

a:link {
  text-decoration: none;
}

.section-3 {
  background-color: #f1f1f1;
  padding-top: .7em;
  padding-bottom: 2em;
  min-height: 50vh;
  margin: 0 auto;
  border-top: 2px solid teal;
  max-width: 100%;
}

.section-3-body {
  text-align: center;
  max-width: 100%;
}

.section-3 .title .meet {
  color: teal;
  border-top: 2px solid teal;
  border-bottom: 2px solid teal;
  border-radius: 4px;
  padding: .7em;
  display: inline-block;
}

.section-3 .grid-container {
  display: grid;
  grid-gap: 2em;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 15px;
  max-width: 100%;
  overflow: hidden;
}

.grid-container>div {
  border: 2px solid #123;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
}

.grid-container h1 {
  size: 12px
}

h3+h3 {
  margin: 0;
}

h1+h3 {
  margin: 0;
}

.section-3 .footer {
  margin-top: 30px;
}

.section-3 .footer .learn-more {
  color: teal;
  padding: .7em;
  border-radius: 14px;
  border: 2px solid teal;
  font-size: 20px;
  font-weight: bold;
}

.section-3 .footer .learn-more:hover {
  background-color: teal;
  color: white;
}

@media screen and (max-width:500px) {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1rem;
    background-color: teal;
  }
}

<section class="section-3">
  <div class="section-3-body">
    <div class="title">
      <h1 class="meet">Testing the Testing</h1>
    </div>
    <div class="grid-container">
      <div class="grid-left column">
        <img src="https://unsplash.it/400">
        <h1 class="name">Testing Names Name</h1>
        <h3 class="testing-2">Testing 2</h3>
        <h3 class="testing-3">Testing 3</h3>
        <h3 class="testing-4">Testing 4</h3>
      </div>
      <div class="grid-center column">
        <img src="https://unsplash.it/400">
        <h1 class="name">Testing Names Name</h1>
        <h3 class="testing-2">Testing 2</h3>
        <h3 class="testing-3">Testing 3</h3>
        <h3 class="testing-4">Testing 4</h3>
      </div>
      <div class="grid-right column">
        <img src="https://unsplash.it/400">
        <h1 class="name">Testing Names Name</h1>
        <h3 class="testing-2">Testing 2</h3>
        <h3 class="testing-3">Testing 3</h3>
        <h3 class="testing-4">Testing 4</h3>
      </div>
    </div>
    <div class="footer">
      <a href="#learn" class="learn-more">Test the button</a>
    </div>
  </div>
</section>

Michael Benjamin · Answer 1 · 2020-07-18T15:36:14.153

It's a specificity problem.

In your large screen code, the container is set to this:

.section-3 .grid-container {
  display: grid;
  grid-gap: 2em;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 15px;
  max-width: 100%;
  overflow: hidden;
}

But in the media query for smaller screens, there is this:

.grid-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 1rem;
  background-color: teal;
}

As you can see, .section-3 .grid-container has a higher specificity than .grid-container, so grid-template-columns in the media query fails to take over.

However, since there's no background-color property in the other rule, the teal background goes into effect with the media query.

As a solution, use the same selector (.section-3 .grid-container) in the media query, so the specificity matches, and since it appears later in the code, it can take over when triggered.

jsFiddle demo

I had no idea about the specificity logic. Thank you very much for informing me and helping me out with the issue!. — jcdla163, Jul 19 '20 at 01:22

Grid won't stack columns when resizing using media query

1 Answers1