Skip to content
Submitted over 2 years ago

Product Preview Card

Evan•10
@CodeSofty
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

  • Did I setup my flexbox containers/parents correctly? Some of this was a bit confusing until I took my time and slowly got the card component to how I wanted it to look like inside the container.

  • I used width: 50% on .card in my media query, is this the best method to resize the card for this type of project?

  • Chrome doesn't want to load my images, but Firefox does, why is that?

  • Was there anything I missed or got wrong or could improve on? Any other comments?

Thanks in advance.

Community feedback

  • Leonard•1,025
    @leoikeh99Posted over 2 years ago

    A nice attempt, i have a couple of corrections:

    1. You shouldn't set the card to a width of 50% rather to an actual value e.g. 600px

    2. As for flexbox i think you used it well but the image and the right part (the content), should both take 50% of the card you can do this by easily setting the width of both the image and the right part (the content) to 50%

    3. It will also be very helpful to set the content parts border-box to box-sizing i.e. box-sizing:border-box in your css

    lastly i'll leave a resource link to a youtube step by step solution to this problem: Product Card Component (Explained) - Frontend Mentor #1

    Marked as helpful
    0
    Evan•10
    @CodeSoftyPosted over 2 years ago

    @leoikeh99 Thank you for the feedback. Quick question, what is the reasoning for the 600px rather than the 50% card width? I thought a percentage would help with responsiveness, but maybe that's not the case.

    0
    Leonard•1,025
    @leoikeh99Posted over 2 years ago

    @CodeSofty with 50% the width of the component at large screen sizes could get stretched too wide which is not how the component was designed. So it makes sense to set a static width e.g. 600px for the component initially, then at smaller screen sizes you could change the width to something like 90% which will help with responsiveness.

    Marked as helpful
    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