NFT preview card component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  Hello Evelyn, congratulations for your solution!

  I've checked your code and the only reason thst your card is not responsive yet its because you've set width in the container, instead replace it with max-width to allow the container to be responsive.

  Note that the difference between these two properties is that width is fixed, example, width: 320px is an container that doesn't get bigger or smaller than 320px but max-width: 320px have the maximum of 320px and can contract when the screen scales down and adjust its size.

  Hope it helps, happy coding

  Marked as helpful

  2

  ---

  

  Eyelin•70

  @EyelinPosted about 2 years ago

  @correlucas thank you very much for taking your time and helping me, I will review this max-width property and try to improve the solution, I really appreciate your feedback 😊

  1
• 

  Eray•1,410

  @ErayBarslanPosted about 2 years ago

  Hey there, a pixel perfect solution, amazing work! Some suggestions:

  • First of all, card already looks good for both desktop and mobile so you won't need responsive design for this specific challenge. You can remove min-width & max-width media queries and any styling inside them.
  • In this case you'd need to center the card and you can do it easy with grid or flex:

  body {
    ...
    display: grid;
    justify-content: center;
    align-items: center;
  }
  

  • For the best practice I'd suggest not giving height to parent elements unless you really need to. By limiting the container's height, if the content inside it changes it'll cause overflowing issues. It's safer approach to let the parent's height be defined by it's children by using margin,padding etc. You can replace it with padding-bottom to keep the design same:

  .card {
    ...
    padding-bottom: 33px;
  }
  

  • For responsive design I'd suggest checking out Kevin Powell's channel. He's a CSS master and explains little details in an easy way. Great work again and happy coding :)

  Marked as helpful

  1

  ---

  

  Eyelin•70

  @EyelinPosted about 2 years ago

  @ErayBarslan thank you very much for taking your time and helping me, I will review these best practices you have shared with me, and I will try to improve, thanks a lot for the Kevin Powell's channel suggestion, I just took a look at it and it seems very good, I will review it! A big thank you!

  0
• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Eyelin, congrats on finishing the challenge, its almost pixel perfect, good job!

  Just a little suggestion, try centering your image using flex directly on your body, instead of adding position: absolute, you should always try to avoid using position absolute and transform to position your layout elements, if you want it to get working, remove all the position attributes and the transform from your .card class, and put your body like this:

  body {
    background-color: hsl(217, 54%, 11%);
    color: #8bacd9;
    font-family: "Outfit", sans-serif;
    font-weight: 300;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

  This will make your body center the component using flex, wich is 99% times better than using absolute values!

  Hope my feedback helps you! try it by yourself and tell me how the results looks!

  Marked as helpful

  1

  ---

  

  Eyelin•70

  @EyelinPosted about 2 years ago

  @DavidMorgade thank you very much for taking your time and helping me, I will review this solution for centering the image, because you are right, adding position: absolute and transform, have brought me some problems in the past, so I was looking for a safer solution, I will try your suggestion for sure, thanks a lot!! 🙏

  1
• 

  Zein•360

  @Zein-MBPosted about 2 years ago

  Hello Eyelin, congratulations for finishing this solution!

  Great job here, it's completely identical

  I just have a note about the box shadow, I think it should has more thickness

  Have a good day and happy coding

  Regards

  1

  ---

  

  Eyelin•70

  @EyelinPosted about 2 years ago

  @Zein-MB thank you very much for taking your time and helping me, I really appreciate it!! I will review your note here and try to improve, a big thank you!

  1