Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Partly Resposive Profile Card component.

Finney 3,030

@Finney06

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would like to get Feedback on how I should go about positioning the background SVG images as it is in the design given and how to go about making it fully responsive.

Community feedback

P
Marge C. 440

@msunji

Posted

Hi! Nice job solving this challenge! 👍

You're moving in the right direction with regards to positioning the background SVG images. You can add a numeric value in addition to keyword values like right,top,bottom, etc. You'll end up with something like this: background-position: left 50vw top 40vh, right 46vw bottom 50vh;. Try playing around with the numeric values until you get it to look the way you want it to look.

Also, it might seem a little counterintuitive to see the bottom image aligned to left and top, and the top image aligned right and bottom. But give it a try and you'll see that it should work fine this way on smaller screens too.

Hope this suggestion helped!

Marked as helpful

1

Finney 3,030

@Finney06

Posted

@msunji thanks for the feedback

0

Please log in to post a comment

Log in with GitHub
Discord logo

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