Chat App CSS Illustration using Sass and Flexbox

Community feedback

• 

  Programming with Shahan•0

  @WithShahanPosted over 3 years ago

  keep going

  0
• 

  bimalmagar•380

  @bimalmagar10Posted over 3 years ago

  Hey, your build isn't responsive at all. Try making it responsive first and for that use relative units like rem as it calculates sizes relative to root element that is html.Secondly,position your ::before element relative to your phone container in such a way that it is centered at the top within the container. I haven't looked at your code but this might help you.

  0

  ---

  

  Efosa Collins EVBOWE•365

  @efecollinsPosted over 3 years ago

  @bimalmagar10

  Thanks for your reply 👍...

  1. My code is responsive. It is highly responsive. It was even checked by my Code Mentors...

  0

  

  bimalmagar•380

  @bimalmagar10Posted over 3 years ago

  @efecollins I really checked your solution in my phone too and wasn't responsive at all.Your phone container overflows your main container and also your .introduction container isn't centered at all when the window resizes below 500px.This is because when the window reisizes below 500px then your phone container has margin-left:23%. -You can center it out by using margin-left:auto and margin-right:auto in the media query of max-width:500px. -And, for .introduction container you should set position:static margin-left:auto and margin-right:auto. Lastly,for that notch layout you should use ::before pseudo-element for your .header container and position it absolutely relative to .header container and center it at the top to get final touch.This way you won't get your chevron-left and menu button disappearing. **PS:**If file attachment option was available here,then I would have shown you where your build is not acting responsive by uploading a screenshot.

  0

  

  Efosa Collins EVBOWE•365

  @efecollinsPosted over 3 years ago

  @bimalmagar10

  Thanks for the feedback..... Thanks so much

  0

  

  Efosa Collins EVBOWE•365

  @efecollinsPosted over 3 years ago

  @bimalmagar10 The chevron-left and menu btn still keeps disappearing even after doing it the way you instructed me to.....

  0

  

  bimalmagar•380

  @bimalmagar10Posted over 3 years ago

  @efecollins You said your chevron-left and menu icons get disappearing while applying the notch in your .header right? Can you share me your code?Your current published solution doesn't seem to have the code just like I said.I need to see how you've done it so.

  0