Submitted almost 2 years ago

Profile Card Component - Flexbox

alexmckm• 170

@alexmckm

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

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,140

@Nadine-Green

Posted 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

alexmckm• 170

@alexmckm

Posted almost 2 years ago

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

Favour• 2,140

@Nadine-Green

Posted almost 2 years ago

@alexmckm

Happy I could be of help :)

Please log in to post a comment

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