Skip to content
Submitted about 2 months ago

Product preview card component

Samira•120
@gely25
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

The most difficult part for me was making the image responsive. From the beginning, I chose to use the <picture> tag to add <source> elements and specify breakpoints. However, when using the browser's developer tools to test different sizes, the image sometimes overflowed or got compressed. Despite setting the container's width to 100%, using object-fit: cover, and trying Flexbox, I still couldn't make the image fully depend on its parent and adapt properly. In the end, I gave the parent container a fixed height for the desktop version and tried to make it fit the image's height, although I don't feel it's a good practice.

What specific areas of your project would you like help with?

I would like to know how I can improve, if there is a way to fix it, or if maybe I did something wrong that altered the image's behavior.

Community feedback

  • Bhuvnesh Upadhayay•2,000
    @bhuvi819381Posted about 2 months ago

    Hey,

    Your solution is great! 🚀

    Few Suggestions for Improvement:

    1. 🏷️ Wrap Everything in a <main> Tag

    The <main> tag improves document structure and accessibility.

    1. 🔠 Use One <h1> Per Page

    Each page should have only one <h1> to maintain proper heading structure.

    1. 📏 Follow Heading Hierarchy

    Use <h2>, <h3>, etc., in a logical order instead of skipping levels.

    Additional Suggestions:

    🛠️ Check for Errors: After submitting, always review the HTML & accessibility error report and fix any issues.

    💡 Bonus: I really liked your button animation—looks super smooth! It's taking some time to appear again maybe if you reduce time it'll be great. 😁 Keep it up! 👏

    Best regards, A Frontend Friend

    Marked as helpful
    0
    Samira•120
    @gely25Posted about 2 months ago

    @bhuvi819381 Hi, Thank you so much for your feedback 🚀 I’ll take your recommendations into account and make the necessary adjustments. I’m glad you liked the animation—I’ll tweak the timing to improve the experience. I really appreciate your suggestions!

    1

Please log in to post a comment

Log in with GitHub

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