social-links using HTML and CSS

Community feedback

• 

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 4 months ago

  Hi @prem-kumart,

  Congratulations on a great looking solution! Good that you were able to improve your workflow during this project. You are making a lot of progress.

  Do you have any specific questions you need help with?

  I checked your solution and have a bit of general friendly constructive feedback:

  body {
      font-family: 'Inter', sans-serif;
      height: 100%;
      margin: 0px;
      background-color: hsl(0, 0%, 8%);
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
  }
  

  You could remove the height and flex-direction: row here. You already set the height here:

  html, body {
      height: 100%;
  }
  

  To prevent overflow issues it's better to use min-height: 100vh, so the html and body still scale with the content inside it.

  You don't have to declare flex-direction: row because this is already the default value when you put display: flex on an element.

  main {
      height: 611px;
      width: 384px;
      background-color: hsl(0, 0%, 12%);
      border-radius: 12px;
  }
  

  Try keeping the height of your card fluid. At the moment you have a fixed height on the card which will cause overflow issues if the content of the card grows. You can see this when you add a lot of text to the card description for example. Just removing the height fixes this because the default value for block elements is height: auto.

  You could make your CSS values more reusable by using CSS variables in the future.

  I hope you find my feedback valuable, and I would appreciate it greatly if you could mark is as helpful if it did help you out.

  Happy coding!

  Marked as helpful

  2

  ---

  

  P

  Prem Kumar•260

  @prem-kumartPosted 4 months ago

  Hello Dylan That review was helpful. The solutions are on point. Thank you. @DylandeBruijn

  1
• 

  mayank1405•100

  @mayank1405Posted 4 months ago

  Website looks absolutely fine. Good job.

  1