NFT Preview Card Component

Community feedback

• 

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  Hello, @homoki76. How are you?

  You don't need the <div class="wrapper"> element. <main> is working as a wrapper here.

  You have given fixed widths to the .wrapper and .container elements, which is blocking the responsiveness of the container. You should only put a max-width: value; on the wrapper element and let the children adjust themselves to the wrapper elements.

  These're changes i'd do in your exisiting code...

  .wrapper {
      max-width: 100%;
      padding: .5rem 1rem; 
  }
  
  .container {
     max-width: 100%;   // want the container to be 100% width of the wrapper
  }
  
  .image-container, .bg-image-container {
     width: 100%;   // want the image container to be 100% width of container.
  }
  

  • The nft image is a descriptive image, means it provide meaning to the content. Therefore, you shouldn't use it as a background image. You should've used <img> element here and provide an apt alt text for screen reader users.

  I wrote a little demo to demonstrate how you could create the overlay effect using pseudo elements. You can read the code in demo for a different perspective. https://codepen.io/pradeeps4ini/pen/yLKbRqB

  Marked as helpful

  0

  ---

  

  Zsolt Homoki•50

  @homoki76Posted over 2 years ago

  @pradeeps4ini Thank you for the feedback. Your codepen demo is extremely useful, pseudo elements are on my list as one of the next ones to learn. Your help is much appreciated!

  0