Skip to content
OverviewSolutions
19
Comments
5

Wesley

@wesleyjacobyCape Town, South Africa330 points

I'm an airline pilot who was recently retrenched because of the COVID-19 pandemic. I am trying to take on a new career in web development.

I’m currently learning...

I'm currently learning frontend web development with Codecademy.

Latest solutions

View more solutions

Latest comments

  • Wesley•330
    @wesleyjacoby

    Hi!

    Well done on completing this challenge!

    I'm also a newbie, so I can't answer all your questions, unfortunately.

    For the border radius issue though - What I found worked for me was putting overflow: hidden; in your .flex-container.

    Hopefully, someone with more experience can answer your other questions.

    Keep up the good work!

  • Wesley•330
    @wesleyjacoby

    Hi,

    Congrats on completing the challenge!

    Fellow noob here and I also struggled with the positioning of the profile image. Here's what worked for me.

    On .profile-image img, remove position: absolute and top: 240px and add the following lines:

    position: relative;
margin: 0 auto;
transform: translateY(-50%);

    You may need to experiment with the translateY percentage. Here's some documentation on translateY.

    I hope that helps, or gets you closer to the result you're looking for.

  • Wesley•330
    @wesleyjacoby

    Hi,

    To center the card/container, you could add the following to the body:

    display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;

    The min-height: 100vh being the important bit. Then you can remove the margin-top from the container.

    This is a great article showing different methods of centering in CSS

    I hope this helps!

    Marked as helpful
  • Wesley•330
    @wesleyjacoby

    Hi Ramdan,

    Congratulations on completing the challenge!

    To center your card, you could use the following code on the parent (body in your case):

    display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;

    This is a great article on centering in CSS

    I hope this helps!

    Marked as helpful
  • Wesley•330
    @wesleyjacoby

    Hi Luci,

    Amazing job with your first solution!

    If you want the letters in the word "perfume" to be spaced apart more, you could use the letter-spacing property.

    Similarly, if you'd like more spacing between the lines in the paragraph/item description, you could use the line-height property.

    Well done again! :)

    Edit: Oh wait, I see you used letter-spacing. Nice!

    Marked as helpful