Skip to content
Submitted over 3 years ago

HTML, CSS, FLEXBOX

Bogdan-Mihail Pavel•625
@codeguy9
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

Hi guys!

First of all I'm having a problem centering the main div vertical. I tried "align-items: center" or "justify-content: center" but it does not work. I tried even to put a margin but nothing happens.

Second, I am having scrollbars on my bottom circle. Don't know why and how to solve this.

The Victor's image is not in center. I placed it with "position: absolute" and it's stuck like I can't even give it a width because it's not working.

Please help I want to make it perfect. Thanks!

Community feedback

  • GerLC•455
    @GerLCPosted over 3 years ago

    Hi!, Great work on completing it. For the first question, you tried "align-items: center" or "justify-content: center", but if you open the developer tools you will see that the main class doesn't have the needed height or the space for it, you could add a min-height: 100vh or height for a quick solution. For the second, I had the same problem, for it I added an overflow: hidden in the body.

    Marked as helpful
    0
  • Skyz Walker•1,045
    @Skyz03Posted over 3 years ago

    Hi Bogdan-Mihail Pavel👋, Great Work on completing the challenge. As per you mentioned to make your margin work like margin: 0 auto; to center the elements you need to give it a width property plus I think you need to wrap you elements in different div element rather than main. Here is my repo solution which i did in the past: https://skyz03.github.io/Front_Profile-Card-Boot/

    For your second question.... I think overflow hidden which i recently learned to eliminate spaces.. will work

    Finally, Inline css doesn't work how you have written it need to be inside style element.

    I hope it helps plus if you have any questions let me know

    Marked as helpful
    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