Social-links-profile

Community feedback

• 

  P

  Kamran Kiani•2,700

  @kaamiikPosted 26 days ago

  Hi. Your HTML is really good. I have some points for your CSS:

  CSS Reset

  • Start with a proper CSS reset - both Andy Bell and Josh Comeau provide excellent options

  ---

  CSS Units

  • Replace px units with rem for better accessibility and maintainability:
    • Use rem for font-size instead of px
    • Convert max-width values to rem units
    • Learn more about unit best practices here

  ---

  Flexbox Properties

  • Remove align-content: center as it has no effect in this flex context

  ---

  Container Sizing

  • Avoid fixed dimensions on text containers. You should not limit the text container:

  /* Instead of: */
  .bottom-container ul li {
    width: 300px;
    height: 3rem;
  }
  
  /* Use: */
  .bottom-container {
    width: 100%;
  }
  

  This allows content to adapt naturally while maintaining container boundaries

  Marked as helpful

  1

  ---

  

  Syed•80

  @SyedYeasin-CoderPosted 26 days ago

  @kaamiik Thank you so much! I'll look into all suggestion. :)

  0

  

  Syed•80

  @SyedYeasin-CoderPosted 26 days ago

  @kaamiik Hello! I have gone through all your suggestion and I found them all helpful! Only problem I'm facing is how I would make the widths of all the buttons links same if I don't specify the width and height for "li" tags. If I try adding padding all the buttons will have different size, which I wouldn't want for this project. Can you provide more insight on this?

  0
• 

  P

  Mohammed-Hassan•120

  @Mohammed-BataPosted 26 days ago

  it is links. <li><a href="#">GitHub</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Instagram</a></li>. I hope you find that helpful

  Marked as helpful

  0

  ---

  

  Syed•80

  @SyedYeasin-CoderPosted 26 days ago

  @Mohammed-Bata Thanks for the feedback! :D. I totally overlooked that.

  1