Responsive Social link profile using HTML and CSS

Community feedback

• 

  T

  Grace•30,990

  @grace-snowPosted 28 days ago

  Hi

  This looks really good! Just a few suggestions for you:

  • This doesn't need a media query. Instead of using an explicit width on the card, give it a max-width in rem and optionally width 100%. Then it will already work on all screen sizes.
  • Consider using a clamp for the padding on the card so it is fluid already without a media query. E.g clamp(24px, 40px, 5vw);
  • Give that image a height as well as width, or give it an aspect-ratio: 1 for a tiny performance boost. The browser will then know how much space to save for it as it loads.
  • You shouldn't be using buttons in this! These are definitely links that would navigate somewhere so should be anchor elements with a valid href attribute.
  • Consider adding a bold custom :focus-visible style. Usually this is an outline and can be offset by a few px. Remember the purpose of focus visible styles is to make it really obvious for keyboard users where they are on a page (it's not meant to be pretty, it's just meant to stand out)
  • Personally I would want those links to be in a list. That helps screen reader users know how many items there are.
  • Those footer attribution links currently fail accessibility requirements because the only way to know they are links is through colour. Give them an underline so they look clickable.

  Marked as helpful

  0

  ---

  

  P

  Tushar Kaundal•120

  @TusharKaundalPosted 28 days ago

  @grace-snow thanks for reply , your comment helped me to learn new things and based on that had made changes.

  0