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

Profile card component with HTML & CSS

YannikS14 110

@YannikS14

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 am wondering if there is a better way to position the bubbles in the background. Currently it's positioned like in the design examples, but just for widths 1440px and 375px. If the width changes, the bubbles move unintended or out of the visible area.

Community feedback

@codeswithroh

Posted

The ideas given by @fraserwat are great. Although, I would suggest you to play with units such as vh, vw, vmin and vmax. If you could understand their working and use it to position your background-image then it will make it much more easier for you to make it responsive.

0

@iadefidipe

Posted

You can create media queries for more screen widths and style/position the background for them. Start the mobile background image from the 768px screen width and position it for that width, keep the mobile screen size position. you can position the desktop background Size for 1024px screen width too.

Your implementation is great, keep coding!

0
Fraser Watt 1,790

@fraserwat

Posted

Yeah its really tricky that part of it. You've got the right idea with your background attribute. Try having it as a background image of the body element and not a container though - at the moment its being partially dictated by the display: flex attribute of your container div.

Also you might want to play around with margin / padding of the container or body to avoid the profile card component taking up the entire screen at smaller screen widths. Otherwise you're sorted! 👍

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