@MelvinAguilar
Posted
Hello there 👋. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
-
If you want to add space between elements in a flexbox container, you can use the
gap
property. The issue with usingjustify-content: space-between
is that you'd need a fixed height, which is not recommended because it doesn't allow for content to expand naturally. If content grows or you add more items, they might overflow due to the fixed height.here's an example of using the gap to create a 10px gap between the elements:
.product-box { display: flex; gap: 10px; /* Add a 10px gap between the child elements */ }
As for using flexbox for each product card, it's ultimately your choice, but be mindful not to overuse it
- You should use the
<a>
tag instead of the<button>
tag because theLearn More
button is a link to another page. Use buttons to perform actions like submitting a form or closing a modal and use links to navigate to another page. You can read more about this here 📘.
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
Marked as helpful