nft-preview-card-component-main

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi Georgeinnerside, congrats for your new solution!

  You’ve done really good work here putting everything together, I’ve some suggestions to improve the design:

  1.Note that there's no need to use height here, because since you set a height for an element, this means that this element will grow until a certain point and after that the inner content (as texts or images) will start to pop out the element due its fixed height, so isn't necessary to set the height the container height comes from the elements, its paddings and height.

  .main-container {
      background-color: hsl(216, 50%, 16%);
      width: 340px;
      /* height: 80vh; */
      border-radius: 10px;
  }
  

  2.Use <main> instead of <div> to wrap the card container, its better to use <mai> in this case because you’re indicating that’s the main block of content of this page and also because <div> doesn’t have any meaning, it's just a block element.

  3.To improve your component overall responsiveness, something you can do its to create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.

  @media (max-width: 350px) {
  .card-description {
      display: flex;
      justify-content: space-between;
      padding: 25px;
      flex-direction: column;
      align-items: center;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Georgeinnerside•80

  @GeorgeinnersidePosted about 2 years ago

  @correlucas Thank you Lucas, still trying to understand how to delete a challenge here and put it back after corrections. Any suggestion will help, thanks.

  0