# Please help me with grid media function

**URL:** <https://forum.freecodecamp.org/t/please-help-me-with-grid-media-function/310062>\
**Category:** General\
**Created:** [August 29, 2019, 12:19am UTC](https://forum.freecodecamp.org/t/please-help-me-with-grid-media-function/310062 "2019-08-29T00:19:02Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![danmcto](https://avatars.discourse-cdn.com/v4/letter/d/ecd19e/32.png) [@danmcto](https://forum.freecodecamp.org/u/danmcto)\
**Post date:** [August 29, 2019, 12:19am UTC](https://forum.freecodecamp.org/t/please-help-me-with-grid-media-function/310062/1 "2019-08-29T00:19:02Z")

</div>

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](https://codepen.io/daniel-albano/pen/qBWrdoV?editors=0100)

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

---

<div class="post-metadata">

**Author:** ![Annestezia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/annestezia/32/74275_2.png) [@Annestezia](https://forum.freecodecamp.org/u/Annestezia)\
**Post date:** [August 30, 2019, 2:58am UTC](https://forum.freecodecamp.org/t/please-help-me-with-grid-media-function/310062/2 "2019-08-30T02:58:49Z")

</div>

Think you re trying to change grid outside media query

```auto
@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.

```auto
@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;
  }
}

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 9:28am UTC](https://forum.freecodecamp.org/t/please-help-me-with-grid-media-function/310062/3 "2021-01-17T09:28:38Z")

</div>

Closed on January 17, 2021, 9:28am UTC