Article Preview Component

Community feedback

• 

  Arne•1,140

  @Dudeldups

  Posted almost 2 years ago

  Wow, why are you putting every element into a separate div? It's perfectly fine if you adjust the elements directly, no need to wrap everything.

  • The div for the triangle is probably better off being an ::after pseudo element.

  • Don't declare font-sizes with pixels, use rem instead

  https://levelup.gitconnected.com/accessible-fonts-please-stop-using-px-for-screen-f0df20efcf8c

  • Use a mobile-first workflow: Declare your basic CSS rules for the smallest screen sizes (from 320px / 20em) up and then use media queries for larger screens (min-width: ??em)

  • Don't use ID selectors in CSS. Those have a higher specificity and let you overwrite things that you probably didn't intend to.

  The problem with your share-button can easily be avoided if you just use one button. Give it a z-index higher than all the other elements, so this way it stays on top. Then you could show the social icons above the actual content when the user clicks the button, and just hide it afterwards.

  00