Skip to content
Submitted over 3 years ago

Profile card using CSS with rem dimensions

LouiseCW•235
@costelloeward
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I'm a newbie and picked this as my first challenge. I tried out doing this using rem rather than pixels. All feedback is appreciated.

I also have some specific questions:

  1. I tried using CSS grid to center the card both horizontally and vertically. It only centered horizontally so I needed to add in a top margin. What's the best way of achieving vertical centering?

  2. I used negative margins to position the larger blue circles as background images. Is there a better way of doing this?

  3. There is a blue inner border on the image of Victor, as well as the white solid border I specified. Why is this and how can I remove it?

Community feedback

  • wisniewskiz•55
    @wisniewskizPosted over 3 years ago

    Great job! Here are my answers to the questions that you have, although I'm not sure if they are the most correct, but just how I went with some of the solutions for those specific issues.

    1. Because we can imagine the card as just a single element that we need to position, flex box would be the best way to go versus grid. You can set a container for the whole body and then justify content and align items to get the card perfectly centered horizontally and vertically.

    2. I did the same thing, but I've looked through some other solutions where people have used ::before and ::after pseudo properties that I am going to experiment with for sure. Somebody has commented on my solution with some of the info if you would like to take a look.

    3. the blue inner border comes from a little bit of padding added to the inner border with the border radius I think. I solved this by also adding a white background behind the image and it solved my problems.

    Great work and good luck!

    1
    LouiseCW•235
    @costelloewardPosted over 3 years ago

    @wisniewskiz Thanks very much, this is really useful. I will have a look at the comment on your solution and do some experimenting!

    0

Please log in to post a comment

Log in with GitHub

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