All comments

• 

  André Aquilina•40

  @dreaquilSubmitted about 2 years ago

  I'm unsure how best to get the sizing of the image and the component right.

  I'm unsure how to deal with responsiveness at the lower end of mobile.

  

  QR Code component using CSS flex.

  2

  30
  

  Brandon Etter•120

  @brandonetterPosted about 2 years ago

  Hey! Centering and sizing things can be hard. You can try using percentages and non-absolute values for sizing to help with responsiveness- and there's always @media queries in CSS!

  https://codepen.io/brandonetter/pen/wvjZMeb

  You can also add centering to your body to keep everything in the middle. Good work.

  Marked as helpful

  0
• 

  Saubhagya•80

  @Saubhagya111Submitted about 2 years ago

  How do I make the class of "unread" being removed when I click on "mark all as read" I tried various ways but it didn't work and how to add the red dot at the end of unread notifications ?

  

  Notification page using HTML, CSS, Bootstrap and JS

  1

  20
  

  Brandon Etter•120

  @brandonetterPosted about 2 years ago

  Hi! My solution would be to add an event listener to "mark all as read" and have that run a function that toggles the class "read" on each element.

  https://codepen.io/brandonetter/pen/oNdVmZR?editors=1111

  Here's a quick example. We use document.querySelector to grab the elements and then place listeners on them. We can access the classList and use the toggle() function to add/remove a class.

  0

  This comment has received 1 replyShow