Profile Card

Community feedback

• Account deleted

  You can add object-fit: cover if you don't want the card pattern to get squeezed on smaller screens. And you can use box-shadow to give the card a shadow.

  For user statistics it's betters to use <ul> (unordered list), make stats <li> (list items) and use the <span> element to style parts of text. And the card should be an <article> or a <section> element instead of just a div to give the HTML more meaning. For the background image you can use a media query so it looks good on desktop too.

  Instead of px it's better to use rem. Rem means root em which is the default font size. Most browsers have a font size of 16px by default. You could change that to 10px by setting font-size to 62.5% on the html element in CSS. That way 1rem will be equal to 10px which is more convenient for you and the people with vision problems who need bigger text. If they change the browser's default font size to something bigger everything that uses rem will become bigger whereas if you use px everything will stay the same size. Watch this video.

  Marked as helpful

  1

  ---

  

  Kirsten ✨•460

  @ofthewildfirePosted over 2 years ago

  @zauri-khutsishvili ty. I will refactor this as soon as I can. :) and I am currently doing a series of tutorials on responsive and have learned about rem, its still a bit hard for me to use, but in my current challenge i am using it exclusively as you recommend. <3

  0
• 

  Abdul Khaliq 🚀•72,480

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  BACKGROUND iMAGE 📸:

  • Looks like the background images has not been properly set yet, they are drastically misplaced.

  ---

  • So let me share my css snippet which helps you to easily apply the background color with the background svg they provided to place perfectly as same as design.

  ---

  • Add the following style rule to your css, after completing these steps you can experience the changes.

  body {
  background: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
  background-position: right 52vw bottom 35vh, left 48vw top 52vh;
  background-repeat: no-repeat, no-repeat;
  background-color: hsl(185deg, 75%, 39%);
  }
  

  • Tip, Don't forget to generate a new screenshot after editing the css file

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0