Solution for nft card preview exercise

Community feedback

• 

  Mohammed Lahboub•570

  @mohammedlahboubPosted over 2 years ago

  HI @iamenochlee your solution look identical to the design , my only observaton is instead of using multiple padding-top u could use display:grid; & gap to creat equal vertical spacing between elements in the .collection-container

  .collection-container { display: grid; gap: 1em; } and remove all margin-top properties

  for more info click this

  this will save a lot of time

  Marked as helpful

  0

  ---

  

  enochlee•600

  @iamenochleePosted over 2 years ago

  @mohammedlahboub oh, thanks

  1
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Enochlee, congratulations for your new solution!

  I've some tips to fix the container and image responsiveness

  Replace width: 324px; with max-width: 324px; to make the container contract while scaling now thats responsive:

  .collection-container {
      max-width: 324px;
      height: 540px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: var(--card-bg-color);
      border-radius: 10px;
      color: var(--color-text);
      padding: 23px;
  }
  

  Make the image super responsive using display: block and max-width: 100% and object-fit: cover to make it crop while scaling:

  .collection-container .nft {
      object-fit: cover;
      display: block;
      max-width: 100%;
      border-radius: 10px;
      /* width: 277px; */
     /*  height: 277px;*/
      cursor: pointer;
      transition: hover 0.3s;
  }
  

  👋 I hope this helps you and happy coding!

  0