Notifications Page using HTML CSS JS
Design comparison
Solution retrospective
- I was unsure of how to add the orange dot to indicate unread in addition to the highlighted blue part.
-I had trouble with getting all of the highlighted blue notifications to go white when pressing "mark all read. " Initially, I just changed the querySelector to querySelectorAll but that itself didn't fix the problem.
Community feedback
- @LucasNahuelPosted about 2 years ago
Hi! In order to resolve the dot problem i resorted to make it a <div> with the "display: inline-flex" property inside a <p> (where all the data from the notification is). Hope it helps!
0 - @wilderav86Posted about 2 years ago
I had trouble with the dots, too.
Try using an empty span element inside your p elements and style those with background color and border radius. You might also have to set the display property of the span elements to inline-block.
Are you still having issues with the mark all read button functionality? It's working for me on your live site.
Hope that helps!
0
Please log in to post a comment
Log in with GitHub
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