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

Notifications Page with HTML, CSS and TailwindCSS

#tailwind-css

@vlhsmylv

Desktop design screenshot for the Notifications page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


  1. What did you find difficult while building the project?

    • I didn't find this project difficult at all, but I stuck sometimes when I tried to make it responsive, because of profile pictures.
  2. Which areas of your code are you unsure of?

    • Clean code - Did I write code understandable? Can others understand the classes I defined and used?
  3. Do you have any questions about best practices?

    • No.

Community feedback

@mahmoudAcm

Posted

@vlhsmylv are you still developing because the notification content clipped when the height shrinks?

Marked as helpful

0

@vlhsmylv

Posted

@mahmoudAcm Actually I finished, but I spotted this problem after submitting. I will add max-height and overflow-y so it won't clip.

0

@vlhsmylv

Posted

@mahmoudAcm I guess I solved the issue. Can you please check it again?

0

@mahmoudAcm

Posted

@vlhsmylv same problem

0

@vlhsmylv

Posted

@mahmoudAcm can you please share an image of the issue?

0

@vlhsmylv

Posted

@mahmoudAcm solved the issue.

0

@mahmoudAcm

Posted

@vlhsmylv it didn't work try to resize the whole browser window height and see it yourself.

0

@vlhsmylv

Posted

@mahmoudAcm I checked it again. There is no actual problem with real usage. There is only one problem with browser size. I will try to solve it, but I don't think it creates any problem with real user experience.

1

@mahmoudAcm

Posted

@vlhsmylv Maybe someone is using a device with a small height especially if the list of notifications is extensive he can't see the top notifications.

1

@vlhsmylv

Posted

@mahmoudAcm I will work on it. It's important for my development. Thank you for informing me!

1

@vlhsmylv

Posted

@mahmoudAcm Hello again!

I guess I finally solved the issue.

It was because I set max-height: 100vh; instead of min-height: 100vh;.

Try to remove site cache before trying

1

@mahmoudAcm

Posted

@vlhsmylv great !! keep up the hard work.

1

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