Assessment wanted for Responsive web design and media queries

MDN Learn
#1

Hi, looking for assessment :eyes:
Here is the task
Here is my code
Thanks :slightly_smiling_face:

I used a grid somewhere and a flex somewhere. It works, but I have a feeling that the same results could be done in a simpler way, with fewer lines of code)

#2

Hi @DiYuriivna

You’re CodePen link is empty. :thinking:

Michael

#3

Sorry, I`ve forgotten to save the pen. Here is a new link on my code

#4

Thanks for the new Pen. This looks better. :grin:

Very well done. I like your use of multiple breakpoints to make it look nice on every screen size.

As an alternative for the cards you could also use only one but a more complex grid-template-columns definition that will make it look nice on all screen sizes:

grid-template-columns: repeat(auto-fill,minmax(250px, 1fr));

This interesting piece of code will make sure that the cards are always at least 250px wide and will grow to fill the space. As soon as there is enough space another column will be added.

Cheers,
Michael

#5

Wow :heart_eyes: "grid-template-columns: repeat(auto-fill,minmax(250px, 1fr));"
I knew there was a better way. This is a very useful piece of code. Thank you Michael!!!

1 Like
#6

The magic of CSS. :grin: