nft-preview-card- component

Community feedback

• 

  Brian Schooler•440

  @superschooler

  Posted almost 3 years ago

  Remove min-height on .main. 70vh is not necessary and will only distort things or made the top and bottom padding inside the container very large.

  Same with .main-image - you gave it a height of 40vh, but it's forced to stretch vertically with this which causes it to be less visually appealing. Instead, you might try width: 100% to make sure it stays tight inside the container but keeps its vertical dimensions. If the container is smaller than the image, however, this may be unnecessary unless you notice it overflowing.

  With that done, to ensure it stays centered vertically on the screen, you can use:

  body {
  	/* This will keep the body at least the height of the viewer's screen, allowing you to center anything inside of it vertically. Notice I use min-height rather than height to avoid overflow on different screen dimentions: */
  	min-height: 100vh;
  	display: flex;
  	/* Center Horizontally: */
  	justify-content: center;
  	/* Center Vertically: */
  	align-items: center;
  
  }
  

  Hope this helps!

  00

  Marked as helpful