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
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
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.
Thanks, I really appreciate the feedback.
I implemented the CSS grids, it looks and responds much better