Community feedback

• 

  Mohaymenul Islam•310

  @nayem567

  Posted over 1 year ago

  Hello @LouisDev23.

  Congratulation on completing this project. Here are some feedback and suggestions on your chat app:

  • Centering First of all, Center your Body Elements vertically. To do this you just have to add a height to your body: body{ height: 100vh; } . As you are using flex to the body element, giving a height will align its children properly.

  • increase padding to the "chatbox" div and to other elements inside of this.

  • chatbox pictures are not clickable, make them clickable with giving them a link. You can use <a> <img> </a> style, means putting the image inside anchor link.

  • yes, adding an icon is little difficult when we start. But it's actually simple when you know the process. There are many Icon library in the internet that you can use. One of the most famous one is "Font Awesome". Just go to their site and follow the documentation. It's pretty straight-forward actually. I'm doing this for you:

  in the head section of your html, add Font Awesome CDN:

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

  Then inside your button add the font-awesome icon: <button> <i class="fas fa-chevron-right"></i> </button> .

  • There needs to be some spacing inside the text div.

  • There is an .attribution div. You have put it inside the text div. Replace the .attribution div out of that text div, this .attribution should come after the text div.

  • In Mobile view, the text section is not aligned properly. make it centered by using margin or flex.

  I hope these helps. Let me know if I can help further. Good luck and Thank You.

  Best Regards, Mohaymenul Islam

  00