Skip to content
Submitted over 1 year ago

Responsive design of a product card component

MB•20
@mariabpulgar
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

The most difficult part for this project was the responsive part. My code works well in the browser and when I resize the screen in the inspector, but when I open it in my phone (iPhone 14 Pro) it doesn't work. I would really appreciate any advise.

Community feedback

  • Jeremy Helsel•670
    @JIH7Posted over 1 year ago

    It actually looks good for me on Firefox for Android! Wish I had an iPhone to test it on and see the issue myself.

    Some other things worth noting though, practicing semantic HTML is always a good thing to do. This is just a small component so there's not a ton of use for semantic tags, but one major one is that the <div> with the .main-container class should maybe be an <article> instead. Using semantic tags instead of regular <div>'s when applicable is great for people using screen readers.

    Here's an article on semantic tags!

    Also it's generally good practice to avoid !important in CSS. Try using a more specific selector instead when possible.

    Marked as helpful
    0
    MB•20
    @mariabpulgarPosted over 1 year ago

    Thank you very much! I really appreciate it. @JIH7

    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