Responsive NFT Card using flexbox

Community feedback

• 

  Akash Singh•60

  @akash-singh95Posted over 2 years ago

  Hi Michael. Your design looks great, sizing and margins all look so refreshing. As for the overflow, try defining your images as display: block; that should resolve it.It's a common issue with images (or any inline elements)

  Marked as helpful

  2

  ---

  

  Prantik•660

  @prantiknoorPosted over 2 years ago

  @akash-singh95 Something new I learned. Thank you. I could solve this problem by using display: grid/flex; on .img-container. But I didn't know why it was happening.

  0
• 

  Suraj Raju Hadage•670

  @SurajHadagePosted over 2 years ago

  I would recommend

  • Whenever making single component design like this, always make them inside a <main> tag.
  • To know accurate dimensions of designs, use Paint.
  • Instead using <div> as an image container use <figure> tag, That would be more accessible & don't use <div> for view. Just give it a class & display block.
  • I would recommend to not upload unnecessary folders & files to save server space. Happy Coding

  Marked as helpful

  1

  ---

  

  Michael•70

  @PowerCreationPosted over 2 years ago

  @SurajHadage I didn't know about Paint, thank you for your feedback! edit: I cant figure out how to get the dimensions of designs using Paint. Are there any guides that can help me ?

  0

  

  Suraj Raju Hadage•670

  @SurajHadagePosted over 2 years ago

  @PowerCreation Make sure we are talking about same app Paint

  Top left side you can see view option, Click and you will see some option, unable ruler and status bar by clicking on it.

  At the bottom you will see status bar showing dimensions. And ruler on top & left hand side.

  0