Responsive Profile Card Component Challenge using Flex

Community feedback

• 

  Timothy•285

  @Timothy1982Posted almost 4 years ago

  On my desktop the card is also not centered. My suggestion would be to give the body a min-height of 100vh and display flex. Then you can center it with justify-content and align-items.

  The top and bottom background images could then be set using ::before and ::after. You could the remove the two divs "top" and "bottom".

  I would also suggest not using position: absolute on your card plus you don't need it when you center it with flexbox (like mentioned above).

  You could add the following styles to your body:

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  

  On you card class remove:

  position: absolute;
  top:...
  left:..
  transform:..
  

  and add

  position: relative;
  

  That will fix your problem with the card header image. And if you have removed the two divs with the background images, all should look nice and centered.

  From there you should get it done with ::before and ::after on the background images. Let me know if you have problems.

  Me or someone else will probably help you out (or in slack).

  1
• 

  Santiago Pablo Ortiz•125

  @sportiz91Posted over 3 years ago

  Thanks for the detailed answer. That was really helpful to me!

  0