NFT card responsive layout using media queries and flex box item

Community feedback

• 

  Santiago Morales•370

  @AleromsPosted almost 2 years ago

  Hi Rishabh, Congrats on getting this project done! Starting off on these projects are a bit difficult but some things that you can do for you next project to help improve your html/css skills are:

  • I would recommend looking up some videos about display flex. It helps a lot in centering objects. For example, to center the div you could have added display: flex; align-items: center; justify-content: center. Doing this will center the div. But the body will only expand as far as the content is, so try adding height: 100vh (viewport height) to the body. This will set the height of the document, covering the whole window.

  Congrats on the challenge and I hope you learned something! Feel free to reach out as well!

  0
• 

  Nabil Wasir•680

  @NabilWasirPosted almost 2 years ago

  Here is how you can improve your solution:

  • Use <main></main> instead of div for the container

  • Your width and the card's height and width are way large in both the desktop and mobile versions. It doesn't even fit the mobile screen. Make the width and height smaller

  • You didn't implement the hover states, so implement them

  • The image at the bottom should have the same width and height. It should have enough border-radius to make it a circle and have a border of around 1px solid (the color of the design)

  • Use * { margin: 0 ; padding: 0 ; } to get rid of the default padding/margin that the browser put on the body

  And if you have any difficulty understanding the things I am saying, visit my solution to this challenge and have a look at the codes

  Hopefully, my feedback is helpful! :)

  0