Skip to content
OverviewSolutions
4
Comments
1
wisniewskiz
@wisniewskiz

All comments

  • LouiseCW•235
    @costelloewardSubmitted over 3 years ago

    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?

    Profile card using CSS with rem dimensions

    1
    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