Skip to content
OverviewSolutions
4
Comments
2
Adam Wilder
@wilderav86

All comments

  • Elias Lind•130
    @EL132Submitted about 2 years ago

    Hello!

    I hope you enjoy the website I made; some questions I still have:

    1. When I was putting the red dots for the unmarked notifications, I created a nested span element and turned the opacity on and off. In doing so, I had a hard time lining the span element up with the text and ended up not doing so because I think the design I have now looks better; however, I would still like to know how to line up my dot with the text. Can anyone help me with this?
    2. I tried commenting my code very well and using proper semantics for my HTML; did I use sufficient semantics and comments in my code?
    3. My responsive design works well up until about 900px, but then the widths of my banners exceed the width of the body. Does anyone have advice for how to get around this issue?

    If you can help with any of these questions, that would be wonderful! If not, thank you for stopping by!

    Responsive Notifications Page using jQuery and JavaScript for notis

    1
    Adam Wilder•110
    @wilderav86Posted about 2 years ago

    Hey Elias,

    I think I figured out a couple of your problems.

    For the span tags: It looks like they have the letter 'r' in them, throwing it off. When I removed the 'r' in dev tools, they lined right up!

    For the banner widths under 900px: I think this has something to do with the width of your main tag. If I remove the 45vw width on the main tag it seems to work better at lower resolutions.

    HTML looks good to me but consider using a footer tag for the div at the bottom with the class 'attribution'. It's another landmark tag similar to 'main' or 'section'. You might also want to use a more descriptive alt tag on your images as well.

    Hope this helps and great job otherwise!

    Marked as helpful
    1
  • Brenda Escobedo (She/Her)•20
    @Brenda403Submitted about 2 years ago
    • 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.

    Notifications Page using HTML CSS JS

    2
    Adam Wilder•110
    @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