Social Profile with Responsiveness with CSS

Community feedback

• 

  Marcos Travaglini•6,210

  @BlackpachamamePosted about 1 month ago

  Hey your solution is amazing! 🤩

  📌 Some accessibility and semantics recommendations for your HTML

  • To improve the semantics of your HTML, you can change your <div class="container"> to a <main class="container">
  • Add a padding to generate interior space on your card. This prevents you from using margin or padding on child elements to achieve the same result
  • You can apply display: block to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements
  • The list of social networks should be links, not buttons or divs. To do this you can create a ul list and have each li have its respective a

  0
• 

  Vladyslav Novikov•80

  @wtfkimiPosted about 1 month ago

  I recommend you look at the design and the design prototype and compare your solution with the design.

  Move the variables from Figma to a separate CSS file with variables, use flex and grid grids for layout.

  Look again carefully at the external and internal margins and compare with what you have. Or better yet, look at the code of my solution https://github.com/abidasfromearth/front-end/tree/main/Social-link-profile/public

  0