Skip to content
Submitted over 2 years ago

Profile card component

Cesar D.•400
@ThatDevDiaz
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

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!

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Aq1q•220
    @Aq1q

    Hi

    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

    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!

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