Skip to content
Submitted about 1 year ago

Responsive Product Preview Card Component

Sarah Saballa•10
@sarahjq-s
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

I'm still learning the technical terms and how to communicate better.

I completed this challenge using flexbox. I would appreciate feedback on a better solution on how to make and position the card component. I'm also learning a mobile-first approach and would like anyone to share any tip or their workflow. I had faced some challenges with this approach and although there was not a major change in the layout after completing the desktop layout, it would be helpful to know a better workflow.

Thank you!

Sarah

Community feedback

  • Karthik•220
    @kcredd-yPosted about 1 year ago

    I found picture tag more useful when you have different versions of images. Your idea was pretty clever.

    0
    Sarah Saballa•10
    @sarahjq-sPosted about 1 year ago

    Thanks for the feedback Karthik!

    Did you mean you could have both the different images in the HTML? May I ask how you would do the CSS style to show the images on different views?

    0
    Karthik•220
    @kcredd-yPosted about 1 year ago

    with Picture tag, you can load up different resolution images and it provides multiple source attributes and apply necessary CSS styles using media queries @sarahjq-s

    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