Profile card component, CSS and Flex

Community feedback

• 

  Josh•1,110

  @josh76543210Posted about 1 year ago

  Hello @ughvop,

  Here is an example of how you can display and postion two background images:

  body {
    background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);
    background-position: top -50rem left -28rem, bottom -57rem right -23rem;
    background-repeat: no-repeat;
  }
  

  Also, I would recommend using flex-box or CSS grid to center the profile card instead of using margins. This will make the page more responsive. Here is an example using CSS grid:

  body {
    display: grid;
    place-items: center;
    min-height: 100vh;
  }
  

  Happy Coding!

  Marked as helpful

  0

  ---

  

  v•110

  @ughvopPosted about 1 year ago

  thanks a lot, the background worked out good but i have overflow scrolling now, both horizontally and vertically. how to fix it? @josh76543210

  0

  

  Josh•1,110

  @josh76543210Posted about 1 year ago

  Hi @ughvop,

  I'm glad the background worked out good!

  I don't see any scrolling when I look at your live site. Can you be more specific?

  0

  

  v•110

  @ughvopPosted about 1 year ago

  when you view it in mobile dimensions @josh76543210

  0

  

  Josh•1,110

  @josh76543210Posted about 1 year ago

  Ok @ughvop,

  The top image on the card is overflowing on smaller screen sizes. To fix this you can do the following:

  1. Change the max-with from 18rem to 100vw
  2. Set the width to 18rem

  .backround-img > img {
    max-width: 100vw;
    width: 18rem;  
  }
  

  0

  

  v•110

  @ughvopPosted about 1 year ago

  thank you! @josh76543210

  0