Blog preview card Solution using SASS

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted 11 months ago

  I see issues in this - I'll share Screenshots in the discord so you can see. It's caused by the height 100vh on the body (which should be min-height) and the height 100% on the html (which shouldn't be there at all)

  Other issues:

  • how would someone click through and read this post when there is no interactive element (anchor) within it? It's impossible at the moment
  • you are misusing section. That should be a div
  • read up how to write good alt text on images. "Profile picture" and "header-illustration" is not good alt text
  • the attribution should be in a footer landmark not inside main
  • you will never want to use width 100vw at all. Viewport units don't include the width of scrollbars or device notches so all width 100Vw can ever do is cause horizontal scroll when you don't want it
  • font family declarations should always include fallbacks
  • max width on the component needs to be in rem not px
  • there is no need for a min height at all
  • never change the cursor to pointer on non interactive elements! That makes them look clickable when they're not
  • the tagbox must not have an explicit width. You don't actually need a div on that at all - place the class onto the paragraph to style it. You should be using padding not width on it whatever you do
  • use gap with flex not margin on children

  Marked as helpful

  2