Submitted 9 months ago

Product Preview Card using Pure CSS & HTML

Johan Jubin• 90

@Johan-Jubin

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

Hi 🙌! This is my 4th project, I have few small doubts, pls be kind to help: 1.how do u like a child div to its parent element? for eg: I had set a border-radius:3%; on the card, but when I added 2 divs in it (one for the image, and the other for the description) , it doesn't inherit the border-radius I set on the parent element ie. the card. And I had to separately add border-radius to each one of them.

2.If u have seen my media query, it's quite long. Can u suggest few responsive methods to make the query short as possible?

3.why do percentage values NOT work good with buttons using border-radius? (Pls explain in simple terms, stackoverflow had a complicated answer).

4.Any other feedback is always welcome

Thank you !

Community feedback

Dean• 480

@Deanogit

Posted 9 months ago

Hello @Johan-Jubin,

Great effort completing and submitting this challenge

Regarding your question about inheritance, it is my understanding that some properties inherit their parents computed value, and other properties do NOT inherit the parents computed value.

A typical example of an inherited property is the color property.

A typical example of a non-inherited property is the border property.

Take a look at the documentation here for more information.

I hope this helps

Well done on your submission

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