Profile card component using SASS

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Siddhi, It looks good!...

  • I suggest you put the status of the profile card into the list item to add more semantics to your project, Div's don't do much for semantics but a list is much more meaningful..:

  <ul class="stats">
     <li><span class="stats-num">80K</span>Followers</li>
     <li><span class="stats-num">803K</span>Likes</li>
     <li><span class="stats-num"> 1.4K</span>Photos</li>
  </ul>
  

  Hope this is helpful to you... Keep coding👍

  Marked as helpful

  1

  ---

  

  Siddhi•90

  @siddhiePosted over 2 years ago

  @Bayoumi-dev Hello, Thank you for the feedback. It helped me improve my project.

  0
• 

  Najeeb Anwari•300

  @najeeb-anwariPosted over 2 years ago

  Hello Siddhi Nandaniya, I hope you are doing great. Your design is not bad but here is what I think you should do to solve some of the issues.

  • The images takes up to much space because they are so big
  • You need to set the svg images as the background of the body tag instead of making it absolute.
  • Set the backgournd-image using url() function. Set size of the image using background-size and also position the images as the required design using background-position.
  • To change mobile background images to desktop background images, use media queries.
  • If you want , you can check out my solution to understand how I did it. https://www.frontendmentor.io/solutions/profile-card-component-using-flexbox-83ibOV7fgW

  I hope this is helpful. Happy coding!!!

  Marked as helpful

  1

  ---

  

  Siddhi•90

  @siddhiePosted over 2 years ago

  Hi Najeeb Anwari, Thank you so much for your valueable feedback. I have made changes to my project as per your suggestion regarding background images. Please check once again and let me know if any changes need to be made for the betterment of my solution.

  Thanks again for the feedback.

  Regards, Siddhi Nandaniya

  1

  

  Najeeb Anwari•300

  @najeeb-anwariPosted over 2 years ago

  @Siddhinandaniya Hello again, I think you should add some padding to the body element. It is a good practice to open developer tools and use device toolbar to check your design in different screen sizes.

  Marked as helpful

  1

  

  Siddhi•90

  @siddhiePosted over 2 years ago

  @najeeb-anwari Hi, Added padding to the body element. Thanks for your suggestion.

  0