Profile Card Challenge Using HTML and SCSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one.

  Layout looks good in desktop and in mobile state as well.

  Though when opening up dev tools, your layout gets squished in the middle, and I suspected, height: 100vh is declared in your bg selector.

  Instead of that, use min-height: 100vh which will be a lot better. But still, your layout won't work because you absolute the card selector which I think not the right choice in here. You want it to be captured by the parent, so making it static or relative is the betters ones.

  So in your card selector. Remove this properties

      position: absolute;
      transform
      left and top
  

  And in your bg selector. You want to add something like

      align-items: center;
      display: flex;
      justify-content: center;
      padding: add a padding to the top and bottom;
  

  This will make your content properly aligned in the center while making element in the flow which is a lot better.

  If you need help regarding those suggestion, just drop it here okay and i'll help you with it^

  0

  ---

  

  Tech Hacks and Tricks•70

  @thetechacksPosted over 3 years ago

  @pikamart Hey I checked out the issue and it looks like this problem doesn't occur in my PC, but thanks for the suggestion. I will check that out. While I was looking through your suggestion, I think it's better to use display: grid; place-items: center; Your ideas would be valuable :)

  0