# Using @media to create responsive grid layout

**URL:** <https://forum.freecodecamp.org/t/using-media-to-create-responsive-grid-layout/310097>\
**Category:** General\
**Created:** [August 29, 2019, 4:02am UTC](https://forum.freecodecamp.org/t/using-media-to-create-responsive-grid-layout/310097 "2019-08-29T04:02:47Z")\
**Posts on this page:** 5\
**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, 4:02am UTC](https://forum.freecodecamp.org/t/using-media-to-create-responsive-grid-layout/310097/1 "2019-08-29T04:02:47Z")

</div>

I am trying to make my grid adjust at different screen sizes. I have it currently to display as a 2x3 grid when under 600 pixels in size and to display as a 3x2 grid when over 600 pixels in size. The problem I am having is that once my webpage passes 600 pixels in size, the image becomes massive and covers the entire page.  
How do I prevent my image from growing and staying in its grid space?

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

CSS lines: 78-82 for @media and 71-76 for my grid.  
HTML lines: 23-67 for contents of grid.

---

<div class="post-metadata">

**Author:** ![vytautas-pilk](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/vytautas-pilk/32/90044_2.png) [@vytautas-pilk](https://forum.freecodecamp.org/u/vytautas-pilk)\
**Post date:** [August 29, 2019, 6:48am UTC](https://forum.freecodecamp.org/t/using-media-to-create-responsive-grid-layout/310097/2 "2019-08-29T06:48:33Z")

</div>

You just have typos or mistakes all over your mentioned lines of code.  
Those mistakes are:

1. You have `@media (max-width: 600px)`. It should be `min-width`. Line 78
2. You have `.products-grid` when your style-sheet should style `.projects-grid`. There’s no `products-grid` class in your HTML code. Line 79
3. You said you wanted to have 3x2 grid when over 600px but you haven’t changed it to have 3 columns. Line 80

Also when setting grid layout, be aware of values like `auto`, `min-width`, `max-width` because they might not give you desired results if you want equal width columns or something along those lines. Good luck.

---

<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, 5:32pm UTC](https://forum.freecodecamp.org/t/using-media-to-create-responsive-grid-layout/310097/3 "2019-08-29T17:32:11Z")

</div>

I did all of these changes, but the problem still hasn’t changed. Once the resize happens, the images all get huge.

---

<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, 5:35pm UTC](https://forum.freecodecamp.org/t/using-media-to-create-responsive-grid-layout/310097/4 "2019-08-29T17:35:33Z")

</div>

Nevermind, I was missing a single bracket which fixed everything. thank you for the help!

---

<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/using-media-to-create-responsive-grid-layout/310097/5 "2021-01-17T09:28:38Z")

</div>

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