Skip to content
Submitted about 1 year ago

Notifications Page with HTML, CSS and TailwindCSS

Valeh Ismayilov•140
@vlhsmylv
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Notifications page
  • HTML
  • CSS
  • JS
2junior

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

  • Mahmoud Tarek•670
    @mahmoudAcmPosted about 1 year ago

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

    Marked as helpful
    0
    Valeh Ismayilov•140
    @vlhsmylvPosted about 1 year ago

    @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
    Valeh Ismayilov•140
    @vlhsmylvPosted about 1 year ago

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

    0
    Mahmoud Tarek•670
    @mahmoudAcmPosted about 1 year ago

    @vlhsmylv same problem

    0
    Valeh Ismayilov•140
    @vlhsmylvPosted about 1 year ago

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

    0
    Valeh Ismayilov•140
    @vlhsmylvPosted about 1 year ago

    @mahmoudAcm solved the issue.

    0
    Mahmoud Tarek•670
    @mahmoudAcmPosted about 1 year ago

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

    0
    Valeh Ismayilov•140
    @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
    Mahmoud Tarek•670
    @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
    Valeh Ismayilov•140
    @vlhsmylvPosted about 1 year ago

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

    1
    Valeh Ismayilov•140
    @vlhsmylvPosted about 1 year ago

    @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
    Mahmoud Tarek•670
    @mahmoudAcmPosted about 1 year ago

    @vlhsmylv great !! keep up the hard work.

    1

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