Product preview card component

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted about 2 years ago

  Hi Woodzy. Congratulations for your first solution in here!

  I think, there is a few options about how to place the attribution area. Your position: absolute; could work. But be careful, when the height of the web browser is shorter than the page content, the attribution area will overlap with the main content. This could be solved by giving this styles to <div class="wrapper">:

  .wrapper {
      position: relative;
      padding-top: 50px;
      padding-bottom: 50px;
  }
  

  Also, remove its style height: 100vh; to make sure it will get its full height no matter the browser height is.

  Another alternative is by implementing display: grid; on <div class="wrapper">, like this:

  .wrapper {
      display: grid;
      grid-template-rows: 1fr auto;
  }
  

  Remove wrapper style height: 100vh;, then remove position:absolute; from the <div class="attribution">.

  Last but not least, wrap <div class="attribution"> inside a <footer></footer> to get rid of the accessibility report.

  Hope this helps.

  Marked as helpful

  1
• 

  Woodzy•30

  @WoodzyyPosted about 2 years ago

  Thank you for advice, it really helps a lot!

  0