Submitted about 1 year ago

Product Card

01JohnnyJohn• 30

@01JohnnyJohn

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

The process was quiet linear. I've, first, set HTML structure. Then I've added all the basic CSS like variables for fonts, colors, background-colors, font-families etc, then matched CSS selectors with all the classes I've given while writing HTML

I've been stuck for a while when trying to make the right side of the product card be spread (in height) within its container. I've also been stuck when trying to make both sides take 50% of the main container when screen width is more than 600px. The problem was that I've set max-width: 100% for image to fill its container, that's why it wouldn't scale when setting main container as a flex container. So, I had to overwrite it in media-query.

Community feedback

Okemwa-mokaya• 350

@Okemwa-mokaya

Posted about 1 year ago

to get a 50% width for both sides you can try using grid, on the container css you could write .container{ display: grid; grid-template-columns: 1fr 1fr; } it will display equal sizes on both sides That is for the desktop display Hope this is helpful

Also for the crossed price you can use <del></del> element. It is highly suggested, you can google it to confirm.

Marked as helpful

01JohnnyJohn• 30

@01JohnnyJohn

Posted about 1 year ago

@Okemwa-mokaya, Yeah, that would work, thank you You would also then need to add max-width to prevent it from stretching too much

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