Design comparison
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 div
s.
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 svg
s 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
- @0xabdulkhaliqPosted 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 thebackground 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 helpful1@daisukeeitaPosted 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! 😁
0
Please log in to post a comment
Log in with GitHubJoin 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