Social Links Profile with CSS

Community feedback

• 

  Tharun Raj•1,330

  @Code-BeakerPosted 6 months ago

  Hi there, congratulations on completing this challenge. You've done a great job with this one! 🎉

  I have some suggestions regarding your code that might help you improve it.

  • use rem instead of px. rem is a little more handy when it comes to making your website responsive. Learn more about this topic here
  • Do not set width for the section. If you wish to then try using max-width
  • The gap at the top is caused by the use of margin-top: 16px on the li tag. Instead, make the ul a flex layout and use a gap so that it doesn't occur.

  .links {
  display: flex;
  gap: .5rem;
  }
  

  If you follow this method, you can remove this:

  li {
  margin-top: 16px;
  }
  
  li:first-child {
  margin-top: 0px;
  }
  

  • The Frontend Mentor errors indicate that your HTML is not very accessible or you have not used appropriate tags for your content.
  • There is an issue with your HTML. You should remove the styles for the link from the li element. Apply it on the a tag because it is meant to serve the meaning and purpose of a hyperlink.
  • I found these to be unnecessary:

  a:link {
    text-decoration: none;
  }
  a:visited {
    text-decoration: none;
  }
  a:hover {
    text-decoration: none;
  }
  a:active {
    text-decoration: none;
  }
  

  You can simply use:

  a {
  text-decoration: none;
  }
  

  Instead of setting it for different pseudo classes like you've done right now.

  • Instead of height: 100vh on the body, use a min-height: 100vh. Using height will limit the height of the container to 100vh which will make your site look bad on mobile phones. Using min-height will help you fix that. Also remove the width: 100vw.

  These are the suggestions I wanted to share with you. If you take care of these, you can avoid most of the HTML errors that are displayed on the Frontend Mentor HTML Validator.

  Hope this helps you 😃

  Marked as helpful

  0
• 

  SuperMustard•60

  @SuperMustardPosted 6 months ago

  Thank you for your advice!

  1