Submitted over 1 year ago

Profile card component

Cesar D.• 400

@ThatDevDiaz

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

This is a solution for...

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Another HTML/CSS challenge by frontend mentor. No frameworks used.

I came across two issues I could not resolve even after some research and spending time adjusting many things.

First, I could not get the profile picture to fit within a circle as shown in the original solution. I've set the border radius to 50% and tried to shrink the image, but the image just would not respond to any of my CSS. I assumed it might be an inherited element affecting it's sizing or border but I could not locate it, if that.

Secondly, I couldn't get the spacing under the statistics and it's label to go away. I have gap, padding, and margin all set to 0 but there's still a large space between say "80k" and "followers" when all these values are set to 0. Again, I think it might be an inherited element doing this but I couldn't figure it out.

Thanks for reading and I'd appreciate any advice/tips!

Community feedback

Aq1q• 220

@Aq1q

Posted over 1 year ago

1 To make the profile pic fit within a circle you could give border-radius of 50% to it directly either by id or a class

2 From what I see there is in fact margin top and margin bottom on both h1 and p tags in your statistics. You can select those tags by giving each paragraph and heading a class and then change your paragraphs margin-top to 0 and your headings margin-bottom to 0

3 You don't need to space those tags with margin left and right, you can just use justify-content: space-evenly or justify-content: space-between

4 You could also center text inside your statistics h1 and p tags with text-align: center;

Marked as helpful

Steve• 1,170

@peanutbutterjlly

Posted over 1 year ago

Hey @ThatDevDiaz,

for the image to be a nice circle, I'd select it by putting a class or id on it and put border-radius: 100vw;.

I put an insanely high number like that (100vw) so I can be sure that it'll be a circle.

as for the spacing by the '80k followers', it looks like your .followers and .likes classes have margin left and right set on it. like @Aq1q said you can remove those margins and go with justify-content: space-around or with gap.

Overall, good job!

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