Submitted about 1 year ago

Responsive Product Preview Card Component

Sarah Saballa• 10

@sarahjq-s

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

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-y

Posted about 1 year ago

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

Sarah Saballa• 10

@sarahjq-s

Posted 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?

Karthik• 220

@kcredd-y

Posted 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

Please log in to post a comment

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