Article preview component with HTML CSS and JS

Community feedback

• 

  T

  Mike Hayden•1,005

  @mickygingerPosted over 3 years ago

  Hello! 👋

  The reason your button is not working is because the styling is moving it before it can receive the mouse click.

  Because you've added margin: 0; padding:0; to any element that is :active it overrides the element styling because :active is more specific that non-active.

  I would recommend removing *:active from your CSS here: https://github.com/Baidya450/article-preview-component/blob/main/styles.css#L9-L13, the box-sizing, padding and margin should not be affected because it has already been set using the * selector.

  Finally I would not recommend using a div as a clickable element because it is not accessible. I would change the .arrow to a button. You will need to set border: none; and a background color to remove the default button styles.

  Hope that helps!

  Marked as helpful

  1
• 

  Eric Salvi•1,330

  @ericsalviPosted over 3 years ago

  Hey,

  The issue has to do with line 9 in your CSS. You are targeting your wildcard selector by including *:active but you most likely meant to use *:after instead.

  Fix that and you should be good to go.

  Keep pushing yourself for my JS challenges!

  Marked as helpful

  1