Using @media to create responsive grid layout

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

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

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.

1 Like

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

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