Product Preview Card Component

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the .attribution element has not been placed bottom yet. Actually it needs to be placed at the bottom of screen and the card component wants to be centered. So let me explain, How you can place the component at bottom with using absolute positioning for footer

  ---

  • Wait, hang up a second. Before moving on to positioning the attribution element you first need to change it into a footer element.

  ---

  • Because the attribution will typically contains information about the author of the section, copyright data or links to related documents. So it needs to be a footer element instead of plain div element to improve accessibility of your solution.

  ---

  ---

  • Now we can proceed to positioning, You you already used Flex layout of css to center the component, So you just want to add absolute position for <footer> element to place it in bottom of the page

  body {
    position: relative;
  }
  
  footer {
     position: absolute;
     bottom: 1em;
  }
  

  ---

  • Now your attribution component has been properly at bottom.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  Risang Abdurrahman Gustiwa•20

  @risangabdurrahmangPosted 7 months ago

  @0xabdulkhalid thanks for your feedback, of course this is useful for me

  0
• 

  Sivaprasath•2,520

  @sivaprasath2004Posted 7 months ago

  Hello @risangabdurrahmang

  • To align the .content-description at the top level and add more space at the bottom, you can use the following CSS:

  .content-description {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: unset;
      height: auto;
  }
  

  • Regarding the .attribution tag inside the footer, you should remove the dot (.) before the class name in the HTML. Here's the corrected HTML:

  <footer>
      <div class="attribution"></div>
  </footer>
  

  • This ensures that the <div> element has the class "attribution" without the dot prefix, making it properly styled by your CSS.

  Marked as helpful

  0

  ---

  

  Risang Abdurrahman Gustiwa•20

  @risangabdurrahmangPosted 7 months ago

  @sivaprasath2004 Thanks for the suggestion, it is very useful and I have implemented it in my code

  0