Skip to content
Submitted 6 days ago

Responsive Product Card using Flexbox and Grid

MarinaPerezR•50
@MarinaPerezR
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 are you most proud of, and what would you do differently next time?

I am quite happy with the final result, but hopefully I will get faster.

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

I struggled with the positioning of the elements, and I had to ask for help changing the img in the different previews.

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

I appreciate any feedback! I really want to know what I can improve in my code :)

Community feedback

  • T23harms•120
    @T23harmsPosted 6 days ago

    Strengths:

    Good semantic HTML structure, with proper use of <main>, <h1>, and <p>. Accessibility: alt attributes are correctly used, but the "Add to Cart" button should be a <button> instead of an <a> for better accessibility. Responsive Design: The picture element is well-implemented for different screen sizes.

    Improvements:

    Mobile Responsiveness: The layout does not seem to be fully optimized for mobile. The content collapses too much on smaller screens, likely because there is no media query adjusting the layout for smaller devices. Suggestion: Add specific media queries to adjust padding, font size, and layout for mobile devices (e.g., making the product image more responsive, and adjusting the container widths). Pricing structure: The old price ($169.99) should be wrapped in <del> for better semantics. SEO: Update the <title> to something more descriptive, e.g., "Gabrielle Essence Perfume - Elegant Scent".

    Conclusion: A very solid solution (9/10), but the layout needs adjustments for mobile responsiveness. Consider adding more mobile-specific styles to improve the experience for smaller screens! 🚀

    Marked as helpful
    0
    MarinaPerezR•50
    @MarinaPerezRPosted 6 days ago

    @T23harms thank you so much for your time and this amazing feedback! I really appreciate it! I will definetly take in count all your suggestions :)

    0

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