Responsive Chat Landing Page

Community feedback

• 

  Arturo Simon•1,785

  @artimysPosted almost 4 years ago

  Good work on completing the challenge ChrisPrzR 👍. I'll leave my feedback below.

  For the icon in the input field. Note that it's not possible to add an image to an input's pseudo selector (:before, :after). Background-image yes but you're using font-awesome and I recommend adding a pseudo selector on the parent container of your input. message-input. See below for font-awesome in pseudo selector

  .message-input:after {
     position: absolute;
     font-family: "Font Awesome 5 Free";
     font-weight: 900; // Important otherwise it won't show
     content: "\f1d8";  // find unicode on font-awesome website
     // play with position
  }
  

  Design:

  • I believe I went with a really small font for the phone illustration. It's weird because too small is not legible but needed to match the design. Here's my solution if you'd like to compare.

  • Look into why there's a horizontal scrollbar. Actually for both .figure1 and .figure2, use position: fixed instead of absolute. They do look a bit squeezed

  • The heading and paragraph font size could be larger.

  Also check out your solution report to fix key things in your HTML markup. Keep it up 👍

  1

  ---

  

  Christian Perez•30

  @ChrisPrzRPosted almost 4 years ago

  @artimys Thanks for taking the time to write this, I will work with your feedback.

  0