Profile card component with HTML & CSS

Community feedback

• 

  Rohit Purkait•460

  @codeswithrohPosted over 3 years ago

  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
• 

  Israel Adefidipe•360

  @iadefidipePosted over 3 years ago

  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

  @fraserwatPosted over 3 years ago

  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