Submitted almost 2 years ago

Responsive Chat App CSS Illustration

Soojeong• 220

@kongguksu

Preview site View code

This is a solution for...

Chat app CSS illustration

HTML
CSS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

In the process of adding animation, I noticed that a scrollbar appears on the right side of the animated elements when the screen size is smaller(non-desktop versions) and I'm trying to search how to get rid of it, but I'm having a bit of difficulty figuring out how to do that. Is there a way to fix this?

Community feedback

turtlecrab• 550

@turtlecrab

Posted almost 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

Soojeong• 220

@kongguksu

Posted almost 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.

Jose Luis Flores Vacio• 210

@JoseLuisFV

Posted almost 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

Soojeong• 220

@kongguksu

Posted almost 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!

Jose Luis Flores Vacio• 210

@JoseLuisFV

Posted almost 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

Soojeong• 220

@kongguksu

Posted almost 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!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord