Profile Card Using Flexbox and SASS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Rhyine! My name is Vanza!

  I have some feedback to improve this solution:

  • The height of your card is 65%, which is not good, because if the user screen height is 768px then the card will stretch. So, my recommendation is using padding-bottom to fixed the issue.
  • As you can see from the design comparison the background color for the body is different.
  • For the circle background, try to use background-image and position in using background-position, if you don't know how to position the background, you can check the solution from @ApplePieGiraffe
  • To write a cleaner Sass in scss syntax, try to write your properties like this:

  &__line {
    width: 100%;
    height: 1px;
    border-width: 0;
    color: hsl(230, 17%, 86%);
    background-color:hsl(230, 17%, 86%);
    margin: 30px 0;
  }
  

  Instead of like this:

  &__line {
  		width: 100%;
      height: 1px;
      border-width: 0;
      color: hsl(230, 17%, 86%);
      background-color:hsl(230, 17%, 86%);
  		margin: 30px 0;
    }
  

  • Next time, you can try to follow this Sass Guidelines to write cleaner Sass.

  That's it! Hopefully this is helpful!

  Happy Coding!

  Marked as helpful

  3

  ---

  

  Rhyine•20

  @the-catalystmcPosted over 3 years ago

  @vanzasetia Thank you for the inputs. Much appreciated.

  0