Responsive Chat App CSS Illustration

Community feedback

• 

  turtlecrab•550

  @turtlecrabPosted over 2 years ago

  Great job on almost perfect pixel layout!

  As it was said before by @JoseLuisF, the problem with flashing scrollbars is because of overflow-y: scroll on main at @media(max-width: 57em).

  Removing it does solve the problem, I just tested it both on real mobile(android) and in devtools preview. Before the fix I could see the scrollbars in both of them.

  It does not remove scrollbars of the whole page - those are handled by html { overflow-y: scroll; }

  It also fixes the weird looking clipping of the shadow of .app-container

  Hope that helps.

  Marked as helpful

  1

  ---

  

  Soojeong•220

  @kongguksuPosted over 2 years ago

  @turtlecrab Thank you for the thorough explanation! I don't think I was understanding fully that the scrollbar of the whole page was handled by overflow property on html. I get it now! I'll try it out right away.

  0
• 

  Jose Luis Flores Vacio•210

  @JoseLuisFVPosted over 2 years ago

  i see your page and main has overflow-y: scroll when max width is 57em

  @media(max-width: 57em) {
     main {
           overflow-y: scroll
     }
  }
  

  I deleted it and scroll disappears.

  Marked as helpful

  1

  ---

  

  Soojeong•220

  @kongguksuPosted over 2 years ago

  @JoseLuisFV Thanks for checking my question out! I do want the actual scrollbar for the website when max-width is 57em, since the elements won't fit on the browser screen.

  I want to get rid of the scrollbar that briefly appears when the animation happens in the beginning when the website loads.

  I just noticed something weird while I was revisiting my codes and live site to try out your feedback. The temporary scrollbar that I mentioned appears when I'm in the "Toggle device toolbar" mode that's available in the devtool, but it's not there when I access the live site from my phone 😂. I'm not sure if this is a problem then.

  Anyway, thanks for your feedback! I really appreciate you looking into my question and my code!

  0

  

  Jose Luis Flores Vacio•210

  @JoseLuisFVPosted over 2 years ago

  @kongguksu Did you already tried add

  main::-webkit-scrollbar {
    width: 0px
  }
  

  i see it, you can add styles to scrollbar this website

  Marked as helpful

  1

  

  Soojeong•220

  @kongguksuPosted over 2 years ago

  @JoseLuisFV I looked at my codes again today and finally understood your feedback. Your first feedback works. I think I misread main as html yesterday. I forgot that I put overflow-y: scroll on main in media queries. Thank you!

  0