Please help me with grid media function

1

I am trying to make my grid reshape at a certain size, but no matter what I try, it seems to completely ruin my document when it resizes. I have no idea why it erases all previous instructions from earlier parent elements, so any guidance at all would be appreciated.

Document: https://codepen.io/daniel-albano/pen/qBWrdoV?editors=0100

My attempted media tag is at lines 76-78 of CSS.

2

Think you re trying to change grid outside media query

@media (max-width: 700px) {
  .welcome-section > p {
    font-size: 25px;
  }
}
.projects-grid {
  display: grid;
  grid-gap: 2rem;
  margin: 0 auto;
  grid-template-columns: repeat(2, 1fr);
  padding-bottom: 70px;
}

Try to put it inside.

@media (max-width: 700px) {
  .welcome-section > p {
    font-size: 25px;
  }
  .projects-grid {
  display: grid;
  grid-gap: 2rem;
  margin: 0 auto;
  grid-template-columns: repeat(2, 1fr);
  padding-bottom: 70px;
  }
}
1 Like