NFT preview card component With CSS Flex

Community feedback

• 

  Maksim•590

  @MaxTarasevichPosted about 2 years ago

  Hi Rian!

  Good job!

  Pay attention to the following points:

  In order to center the .card block, you made the body flex container as well as the .container block. I think this is a bit redundant, try to remove the flex properties from these blocks, as well as the properties

  max-width: 30%; height: auto;

  height: auto; is the default property and max-width: 30%; will greatly compress your card at low screen resolutions, and vice versa at high resolutions - greatly stretch it.

  It is enough to set the width for the .card block and give it a property margin: auto; the block will be centered. Or, instead of margin, return the flex properties to the body tag.

  For block .overlay properties

  width: 100% 
   height: 98.5%;
  

  superfluous, just set

     top: 0; 
     left: 0; 
      bottom: 0; 
      right: 0;
  

  or in the shorthand

  inset: 0; 
  

  and the block will take the entire width and height. In order for the image to match the parent block, add the property display: block;

  I hope my feedback will be useful to you!

  1