Skip to content
Submitted almost 2 years ago

Profile Card Component - Flexbox

alexmckme•170
@alexmckme
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

Hello everyone!

I did not bother to put the main container exactly at the center of the screen this time, as I realized the method I used for previous solutions (eg: position: fixed; top: 30%; transform: translate(0, -30%);) made it so that the main container be cropped on some screen sizes.

Any advice on how you would approach placing the main section at the center without losing responsiveness is welcome!

I do not know how to manipulate SVGs so I just put them in the background without further processing.

Thanks everyone!

Community feedback

  • Favour•2,160
    @Nadine-GreenPosted almost 2 years ago

    HEY ALEXMCKM!

    About your issue with centering, a quick fix for this would be the give the body a height of 100vh height:100vh then a display of grid display: grid and then using the code place-items: center

    And for your background issues, this is the code that I used for mine, hopefully, it can help you too:

    background-image: url(images/bg-pattern-top.svg),
    url(images/bg-pattern-bottom.svg);
    background-position-x: -100%, 200%;
    background-position-y: 85%, -60%;
    background-repeat: no-repeat, no-repeat;

    HOPE I COULD BE OF HELP :)

    HAPPY CODING!

    Marked as helpful
    1
    alexmckme•170
    @alexmckmePosted almost 2 years ago

    @Nadine-Green Thank you so much for your feedback, extremely useful!

    0
    Favour•2,160
    @Nadine-GreenPosted almost 2 years ago

    @alexmckm

    Happy I could be of help :)

    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