Chat-App-Css-Illustration-Master

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on your illustration. Looks really good, the overall layout in desktop is good and the mobile state as well..

  Though issues when resizing your layout going down to the mobile state.

  Suggestion/s would be that'

  1. Removing the max-height: 100vh in your body tag since right now, is you set that up. Opening dev tools, you can see that your body tag does not really captures the whole layout like it is supposed to, because it is limited to that max-height.

  2. Making the body tag position: relative. Right now, those two background images is relative to the viewport since the body is not relative. So it will be better if you set that up. But if you do this, you need to add padding to the top and bottom of the container so that the element will not be touching the ceiling and flooring of the screen. If you do this, last, you need to remove as well the margin-top declared on your container selector. Now even when resizing the height, the content will not move up and down.

  3. Resizing your layout, the screen now completely hides the text which is not really ideal. Since there is a large margin on the left, the layout does not resizes thus the text being hidden by the screen. It will be really awesome if you make a breakpoint on those so that you could prevent it.

  4. Lastly. On the mobile state, it will be really good if you use margin: 0 auto on your container selector so that it will be always centered and respond well.

  Overall, great work on this one^^

  0