Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile first Notif Page w/ Interactive notifs - SCSS/HTML/JavaScript

sutulip 50

@KmSutula

Desktop design screenshot for the Notifications page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

@LucasNahuel

Posted

Hi! Only noticeable things are how your notification image with "notif-pic" class doesn't stick to the right end side. Also, clicking "mark all as read" doesn't make the notification count 0.

You coul make your "notif-details" class to have "width: 100%" to fix this or since you're using flexbox, i recommend the next structure or something similar to your notification:

<div class="notif-picture-li" style="justify-content: space-between"> <div style="display: flex; flex-direction: row"> //profile-pic and notif-details here </div> <img class="notif-pic"> <div>
0

Please log in to post a comment

Log in with GitHub
Discord logo

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