Submitted over 1 year ago

Profile Card Component using Flexbox and Grid

JAVV• 80

@daisukeeita

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! 👋

This is my solution to Profile Card Component.

I used Flexbox to center the Profile Card Component. To center the profile picture, I used the position: absolute with position:relative of the parent div to overlay the profile pic to the 2 divs.

To minimize the manipulation of the 'statistic' section, I used the Grid layout.

This is where I was stuck, the background of the body. At first, I have no idea how to insert multiple svg inside the CSS and also manipulate them to set the svgs on the exact location, based on the given screen sizes. Thanks to CSS-Tricks I got the idea on doing both.

This is what I want to ask, how am I gonna approach in making the svg responsive based on the screen size? Once you inspect my solution, the sizes of the svg will only change once it gets to a certain width based on the media screen. But I want to automatically change its size relative to the screen size.

Any suggestions to make this solution better is welcome! 😁

Community feedback

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted over 1 year ago

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you.

BACKGROUND iMAGE 📸:

Looks like the background images has not been properly set yet, they are slightly misplaced. So let me share my css snippet which helps you to easily apply the background color with the background svg they provided to place perfectly as same as design.

Add the following style rule to your css, after completing these steps you can experience the changes.

body {
  background: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
  background-position: right 52vw bottom 35vh, left 48vw top 52vh;
  background-repeat: no-repeat, no-repeat;
  background-color: hsl(185deg, 75%, 39%);
}

Tip, Don't forget to generate a new screenshot after editing the css file

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

JAVV• 80

@daisukeeita

Posted over 1 year ago

@0xAbdulKhalid

Hi! 👋

This actually saved me from the problem and it doesn't destroy the output even if I adjust the width of the screen. How come that background-size doesn't have to be specified here especially in mobile screen?

Thanks a lot, really! 😁

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