Notifications Page with HTML, CSS and TailwindCSS
Design comparison
Solution retrospective
-
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.
-
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?
-
Do you have any questions about best practices?
- No.
Community feedback
- @mahmoudAcmPosted about 1 year ago
@vlhsmylv are you still developing because the notification content clipped when the height shrinks?
Marked as helpful0@vlhsmylvPosted about 1 year ago@mahmoudAcm Actually I finished, but I spotted this problem after submitting. I will add
max-height
andoverflow-y
so it won't clip.0@vlhsmylvPosted about 1 year ago@mahmoudAcm I guess I solved the issue. Can you please check it again?
0@vlhsmylvPosted about 1 year ago@mahmoudAcm can you please share an image of the issue?
0@mahmoudAcmPosted about 1 year ago@vlhsmylv it didn't work try to resize the whole browser window height and see it yourself.
0@vlhsmylvPosted about 1 year ago@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@mahmoudAcmPosted about 1 year ago@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@vlhsmylvPosted about 1 year ago@mahmoudAcm I will work on it. It's important for my development. Thank you for informing me!
1@vlhsmylvPosted about 1 year ago@mahmoudAcm Hello again!
I guess I finally solved the issue.
It was because I set
max-height: 100vh;
instead ofmin-height: 100vh;
.Try to remove site cache before trying
1
Please log in to post a comment
Log in with GitHubJoin 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