Assessment required for Media Queries and Responsive Design

Hello everyone, I have completed the following exercise form MDN CSS course:

Test your skills: Media Queries and Responsive Design - Learn web development | MDN (mozilla.org)

I would like someone with more experience on the matter to take a look and point out to any shortcomings of my solution. As evident I have used three media queries in my solution:
JSFiddle - Code Playground

Thank you !

Hi @Rastko_Gojgic

Nice work on this one!

Here are two simplifications that could be applied:

  • You could add justify-content: space-between; and align-items: center; to the header and remove the .title and nav selectors.
  • Instead of pixel values you could also use 1fr in the grid-template-columns of .cards. This way you wouldn’t need the 1600px media query.

Just to give you an idea what’s possible with grid:

grid-template-columns: repeat(auto-fill, minmax(300px,auto));

This is a more advanced version for the cards. It places as many 300px wide cards per row that fit and stretches them evenly to use all the space. On medium screens you would automatically get two columns and on larger one three (or even more). You wouldn’t need any other grid definition for the cards class. Cool, isn’t it? :wink:

All the best,
Michael

1 Like

Cool, grid is such an amazing tool, it makes everything easy.

Thanks for the advice, I will try to make my code simpler in the future :slight_smile:

1 Like