Social Links Profile - HTML , CSS

Community feedback

• 

  Rayco21•130

  @Rayco21Posted 6 months ago

  3 things I think I can help to make it better

  .profile { width: 100%; height: 625px; min-width: 375px; max-width: 375px; background-color: var(--darkGrey); border-radius: 15px; text-align: center; }

  width:100% ----> means I want it to grow or shrink to have 100% width of the container min-width: 375px. ---> means I don't want it to grow more than 375px max-width:375px. ---> means I don't want it to shrink less than 375px

  so it means you want it to have fixed 375px you can just set width: 375px then and get rid of min-width and max-width

  ---

  .profile__location { color: var(--primary); font-style: normal; font-size: 0.8rem; font-weight: 600; padding: 10px; }

  .profile__description { color: var(--white); font-size: 0.8rem; padding: 20px; }

  looks like to me you set padding to have space between elements imagine if you had background-color for these elements, it would cause undesired issue it's best practice to use margin instead of padding

  ---

  .profile__link { display: inline-block; width: 300px; height: 45px;
  font-weight: 600; font-size: 0.875rem; color: hsl(0, 0%, 100%); text-decoration: none; background-color: var(--grey); margin: 8.5px; text-align: center; line-height: 20px; border-radius: 10px; padding: 10px; }

  looks like these links don't have their texts vertically centered, so you can either center them by setting them to flexbox, or another approach is that to set line-height:45px (height is currently set to 45px) when line-height has the same value as height the text will be vertically centered (you will need to get rid of padding-top and padding-bottom though if you take this approach)

  Marked as helpful

  0

  ---

  

  P

  KN•170

  @kaiens-labPosted 6 months ago

  @Rayco21
  Thank you very much for your feedback! I have already made the changes. If you have any other suggestions, please feel free to let me know!

  1
• 

  Akash Mishra•160

  @akashmishrahahaPosted 6 months ago

  Wow the website look just amazing. Good work mate!

  0

  ---

  

  P

  KN•170

  @kaiens-labPosted 6 months ago

  @akashmishrahaha Thank you! :)

  0