Social Links

Community feedback

• 

  Kamran Kiani•1,840

  @kaamiikPosted 2 days ago

  Some notes that may improve your code:

  1. Headings are like the title of a page or card. In this card, while the name is a heading, the .location is just an address and should be wrapped inside a p tag.

  ---

  2. Use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have good ones. You can search the internet to find them.

  ---

  3. Your font-size and max-width should be in rem units, not px. You can read this article about it and why you shouldn't use px as a font size.

  ---

  4. Use min-height: 100vh; instead of height:100vh;. height: 100vh strictly limits the height to the viewport size, potentially causing overflow issues if the content is larger than the viewport. On the other hand, min-height: 100vh allows your element to grow in height if the content exceeds the viewport size.

  ---

  5. Using width: 300px; and height: 500px; inside your .card is incorrect. Never limit the width and height of a container or element that contains text. When you limit the width and height of elements containing text, you risk the text being cut off, overflowing, or becoming unreadable, especially on smaller screens or when the text dynamically changes. It's generally better to allow the container to adjust its size based on its content or set a flexible size that can adapt to different screen sizes and text lengths. You only need max-width here because it prevents elements from stretching beyond a certain point, keeping them visually appealing across different screen sizes. It ensures your design remains adaptive and doesn't get too wide on larger screens.

  ---

  6. The width: 260px; inside .social-link is unnecessary as well.

  Marked as helpful

  0