Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3 Column Preview Card with HTML and CSS

Grunt395 40

@Grunt395

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I used the justify-content: space-between; property for the first time in this project. While it helped me space out some of the elements, I still struggled with getting precise spacing, especially when it converted to the mobile layout. Is there a better way to space the elements out for each product card? Should I have even created a flexbox column for each product card in the first place?

Community feedback

@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 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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord