Submitted 12 months ago

Responsive product preview card using flexbox

mihai2537• 190

@mihai3636

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

Hey, guys!

I noticed that I'm always having troubles with deciding what should I explicitly size first: the image itself or its container?
for example, my approach was to first ask myself: how big do I want the whole stuff to be (left plus right pannel). Then I set the container width then I figured out that I want the picture to be half of the container so I went and I set a width on the picture. Is there any better approach in scenario like this (left panel image + right panel text)?
last question: what would be the best approach to change the img dinamically based on the viewport size? This time I used the html picture tag, do you usually do it differently? I read that there is some way by making it the background image or something.

Thanks for reading, if you see anything else that I did which is fishy, please let me know!

Community feedback

P. Ricardo• 2,370

@pRicard0

Posted 12 months ago

HTML tips

Add aria-hidden="true" and focusable="false" to the SVG element to hide it from technologies such as screen readers.
Instead of using the tag  with the text "$149.99", you can use the  tag. The  tag is used to define emphasized text. The content inside is typically displayed in italic. A screen reader will pronounce the words in  with an emphasis, using verbal stress.
You can use the tag <s> instead of the tag  with the text "$169.99". The <s> tag specifies text that is no longer correct, accurate or relevant. The text will be displayed with a line through it by default.

CSS tips

You can add transition: 200ms; to your button for a smoother color change.

Marked as helpful

mihai2537• 190

@mihai3636

Posted 12 months ago

Thanks a lot

Very helpful information, I will remember all of these in the future.

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