Responsive Profile Card Component Main

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @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 misplaced due to the usage of individual img elements. Actually there's an easy way to handle this problem with positioning the background images

  ---

  • 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%);
  }
  

  ---

  • Now you can remove these individual img elements from the html

  <img class="background top" src="images/bg-pattern-top.svg" alt="">
  
  <img class="background bottom" src="images/bg-pattern-bottom.svg" alt="">
  

  ---

  • 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

  1

  ---

  

  Jatin Poriya•180

  @InterestingPlusPosted over 1 year ago

  Thank you so much for your kind words and congratulations!

  🎉 I really appreciate your feedback and recommendations regarding the code.

  Regarding the background image issue, I agree that using individual img elements for the background images can be problematic. Thank you for providing a CSS snippet to handle this more effectively. Your solution seems quite elegant and should help position the background images perfectly according to the design.

  • I'll definitely implement this in my code and remove the individual img elements from the HTML.
  • Your tip about generating a new screenshot after editing the CSS file is duly noted.

  Once again, thank you for your helpful contribution and for appreciating the solution I submitted. Your feedback means a lot to me!

  Happy coding to you too! 😄

  0