Responsive Social Links Profile using CSS Flexbox

Community feedback

• 

  Emerson-Henrique•50

  @Novicks

  Posted 4 months ago

  Your code is well structured, but you just need to pay attention to some lines that sometimes end up being repeated in your style.css, such as .social-media ul li a or display: inline-block is repeated twice, which ends up being redundant.

  1- For better responsiveness on different screen sizes, I recommend using the @media screen and (min-width or max-width) CSS, which changes part of your application's style at certain width measurements, allowing your application to adapt to different screen sizes. I recommend that you structure your site with the mobile version in mind first, so that when you use the media query to adapt the layout from mobile to computer, it will be easier and simpler to adapt the elements to a larger screen.

  2- The hover and focus states are great, congratulations on your work.

  3- When it comes to optimizing style.css, I recommend that you always try to check if certain lines of code are already found in parent elements of the object you are styling so that there is no code redundancy, but your code in general is optimized and very clean.

  00
• 

  jdrodriguez2707•170

  @jdrodriguez2707

  Posted 4 months ago

  Hi, @rukhulkirom. I hope you're doing great! Your solution looks really good, you replicated the design very well. Also, I really liked that you used <ul> and <li> elements for the social links list. I actually incorporated them into my own solution thanks to you!

  Here are some tips I can give you according to your requests:

  • About the responsiveness & mobile optimization, the design looks great on all devices! However, you might consider adding some horizontal padding to ensure proper spacing around the card on smaller screens.

  • Another thing to improve is the measurement units you used. Instead of px, consider using rem for better adaptability to different user font sizes. This ensures that your website remains accessible and scales properly. I recommend this article for a deeper understanding.

  • You could also add transitions so the hover effects look more fluid, for example:

  .social-media ul li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    display: inline-block;
    width: 100%;
    color: hsl(0, 0%, 100%);
    padding: 13px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    border-radius: 8px;
    transition: 0.3s ease;
  }
  

  This is optional, though. The hover effects already look good and interactive.

  • About the code optimization, As you mentioned, adding classes and CSS variables could be beneficial. While they might not seem necessary for small projects, you'll notice a significant difference in larger ones.

  • Also, consider exploring alternative ways to add fonts, such as using @font-face in CSS or the <link> tag in HTML instead of @import. This can improve performance.

  • Finally, I noticed that the profile image looks slightly irregular. You can use the aspect-ratio property to maintain the correct width-to-height ratio, along with object-fit to ensure the image adapts properly without distortion. Here's how:

  .card .profile-card img {
      width: 100px;
      border-radius: 50%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
  }
  

  Make sure to remove the height property so it adjusts automatically. You can learn more about aspect-ratio in the MDN docs

  That's all. Keep up the great work, and happy coding! 🚀.

  00