Responsive NFT preview card component Using CSS Flex Box

Community feedback

• 

  Agnik Bakshi•480

  @Agnik7

  Posted over 2 years ago

  Hi,

  Congratulations on completing this challenge!!🎉🎉 While going through your code, I found certain things that might be of help to you.

  • For the styling of the body tag, you can actually omit position: relative and width:100%. This is because even if you don't define the width of any container element, it's width is taken 100% by default. As for the position:relative, it's just unnecessary. Instead of defining the height as 100vh, define the min-height as 100vh for better responsiveness. min-height:100vh.

  • For the .card, instead of assigning the width, assign the max-width. This way, you set a limit to the width, and at the same time, not keep the width constant. Do not define the height of the card. This way, you can ensure that the card takes up as much space as it requires, and no extra space is wasted. Additionally, you can also omit the media query, as it will not be required once you remove the declaration of height.

  • In order to prevent overflow, set only the top margin of the info section as 1rem.

  .info{
  margin-top:1rem;
  }
  

  Hope this feedback helps you. Have a nice day!!!

  01

  Marked as helpful