Responsive Profile Card Component HTML & SASS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Vincenzo-Git-hub, congratulations for your new solution!

  😎 You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:

  1.To add the circles (bottom/top) in the background, the best way is by using background-image to manage it since adding them to the body you make sure it will be under everything, see the properties below and see that the comma inside each properties declare the single modification for each circle separated.

  body {
      background-color: hsl(185deg, 75%, 39%);
      background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg);
      background-repeat: no-repeat, no-repeat;
      background-position: top -500px left -400px, bottom -700px right -250px;
      font-family: var(--ff);
      line-height: 1.6;
      text-align: center;
  }
  

  2.Your solution its already good, something you can do to improve the card responsiveness is create a media query for the stats section and make each stat number stay in a different row after max-width: 350px using a media query, here's the code for that:

  @media (max-width: 350px) {
  .flex {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  2

  ---

  

  Vincenzo•90

  @Vincenzo-Git-hubPosted about 2 years ago

  @correlucas thank you very much for your suggestions!

  0