Submitted almost 3 years ago

profile card component

Harsh Champakbhai Patel• 150

@harsh72835

Preview site View code

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I have a doubt regarding the bottom circle which is overflowing can anyone have any advice for it?

Community feedback

Faris P• 2,810

@FarisPalayi

Posted almost 3 years ago

You can use the z-index property to stack things. Set the z-index to 1or higher on the .card element, and it will stack on top. You can read more about z-index on MDN

Harsh Champakbhai Patel• 150

@harsh72835

Posted almost 3 years ago

@FarisPalayi thanks for tip.!

Tereza• 605

@sirriah

Posted almost 3 years ago

Hello, the problem with the bottom circle is that it has not set the z-index. So the browser doesn't know, which element should be on top.

But instead of setting this, try to add these two circles into the ::before and ::after selectors. These images are not the part of the content they are only a background, so you can put them into the css.

Happy coding!

Harsh Champakbhai Patel• 150

@harsh72835

Posted almost 3 years ago

@sirriah okay, thanks for help.

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