NFT Card with Flexbox

Community feedback

• 

  raya•2,850

  @rayaattaPosted 10 months ago

  Hello 👋Jackcheal Dang, congratulations on completing this challenge 🎉

  I have some suggestions you might find interesting.

  1 Remove the <div class= "attribution"> from the main and change it to <footer class="attribution"> And wrap it's text inside a p element. This improves accessibility and SEO since it is much more semantic.

  2 About your questions regarding css best practices.

  a) You used width: 310px; On the .card This is okay but in case a screen is less than 310px wide then the card overflows the view port. You can make it more responsive by using max-width:min(90%,310px) This means it is 310px but on smaller screens it only covers 90% of the width.

  b) In order center your card on any screen,add

  min-height:100vh;
  

  To the css for body and then remove the margin properties from .card.

  You can learn some best practices from this site https://fedmentor.dev/

  I hope this helps 🙃

  Your solution is awesome 👏

  Happy coding bro✌️

  Marked as helpful

  2

  ---

  

  Jackcheal Dang•70

  @jackchealdangPosted 9 months ago

  @rayaatta Thank you so much! I've appliyed the max-width: min and min-height: 100vh to my FAQs Accordion and it's amazing. Appreciate the help! 😄 I'll make sure to use footer for SEO as well

  1
• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 10 months ago

  Hello @jackchealdang!

  Your project looks great!

  It's quite a challenge to add that hover effect properly. Here's how you can do it:

  HTML

  <img src="images/image-equilibrium.jpg" alt="Equilibrium" class="pic">
    <div class="icon">
      <img src="images/icon-view.svg" alt="icon-view" class="icon-view">
    </div>
  

  CSS

  .pic {
     width: 300px;
     background: url('images/icon-view.svg') center center no-repeat;
     background-color: $Cyan-hover;
     background-size: cover;
     margin: auto;
     border-radius: 10px;
  }
  .icon {
     display: grid;
     justify-content: center;
     align-items: center;
     position: absolute;
     opacity: 0;
     background-color: $Cyan-hover;
     width: 300px;
     height: 300px;
     border-radius: 10px;
  }
  icon:hover {
     opacity: .5;
     cursor: pointer;
  }
  

  Just don't forget to change the class names to match yours.

  I hope it helps!

  Other than that, you did an excelent job!

  Marked as helpful

  0

  ---

  

  Jackcheal Dang•70

  @jackchealdangPosted 9 months ago

  @danielmrz-dev Thanks for the help Daniel! Actually, I had just completely forgot about the hover effect as part of the challenge lol. Thanks for reminding me 😂

  1