nft preview component code with flexbox

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Nice job with this one. You did good with the HTML structure and the design. I would suggest the following for you...

  • Remove text-align:center in the body rule set
  • Adjust the padding into 20px inside the card
  • Modified and add some properties with the h1 like this...

  h1 {
    color: hsl(0, 0%, 100%);
    text-align: start;
    margin-right: 4.6rem;
    font-size: 22px;
    padding: 0.5rem 0;
  }
  

  • Remove unnecessary comment in your code
  • Remove the style property and add it on the CSS file

  Hope this helps and Keep it going!

  Marked as helpful

  0

  ---

  

  Dante D Roronoa•90

  @bandja047Posted almost 3 years ago

  Hi @RioCantre thanks for you suggestion

  1
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @bandja047 ~

  Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it. Especially I like BEM structuring on your project.

  Here are some of the tips I like to provide.

  • On smaller devices, card goes over screen, and I think max-width: 100% can solve this issue.
  • Please try BEM for naming element classes. It will help you a lot on bigger projects.
  • There is no hover effects on image and other elements. It's also one of challenging part here.
  • Image tags must have alt attributes as standard.

  https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

  Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

  Cheers ~

  Marked as helpful

  0

  ---

  

  Dante D Roronoa•90

  @bandja047Posted almost 3 years ago

  Hi @tymren608 thank you for your suggestions I could not realize the effect on the image.

  0