Assessment wanted: media Queries and responsive design web

MDN Learn
#1

Hi, I would like my work to be assessed and i will really appreciate your feedback.
Here’s the assessment link: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/rwd_skills

Below is my solution:
https://codepen.io/coddysey/pen/mdVqRRr

#2

Hi there @Hussein_AbdulQohar! Welcome to our community, and thanks for sending your code in!

I’d say this is a really good strategy for solving this problem.

One point — for the cards, I can see why you’ve done

flex: 250px;
max-width: 250px;

You want to keep the cards to 250px each, so they line up when some of them drop onto a new line. Bear in mind that you can achieve the same effect by just doing this:

flex: 0 250px;

Here we set the flex-grow part of the value to 0, so each flex item takes a width of 250px, but then doesn’t grow any further.

I think probably even better would be to use CSS grid for the card layout — at the moment you have gaps being left on the right of the row. try something like this:

.cards {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

And the horizontal space will always be filled up by three cards on each row, and they will line up in the different columns too.

1 Like
#3

Thanks, I really appreciate the feedback.
I implemented the CSS grids, it looks and responds much better