3 Column Preview Card with HTML and CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 1 year ago

  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 using justify-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 the Learn 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

  1