NFT Preview Card Component using HTML and CSS Newbie

Community feedback

• 

  Mukwende•1,370

  @mukwende2000Posted over 1 year ago

  So this is how it works, when you give an element position: absolute, css checks if the parent of that element has a position of relative, if it does not, it checks up the dom until it finds one that has the relative position, then it will position the child in relation to that element, if it does not find any element that has a position of relative, it positions the element relative to the body. Your ntf-view is positioned absolute to the body and not the ntf-all. That is why the hover is not doing as you expect it to, to fix this just do this

  ntf-all {
  position: relative;
  }
  

  by doing this, you make the element a positioned element, so any child inside it that are given the position: absolute; will be positioned in relation to it, which means if you say

  ntf-view {
  position: absolute;
  top: 0;
  }
  

  This will make the top part of the ntf-view align with the top of its parent.

  Marked as helpful

  1
• 

  João Victor Abreu•80

  @shufitoPosted over 1 year ago

  Hello 👋. Congratulations on successfully completing the challenge! 🎉

  I have other recommendations regarding your code that I believe will be of great interest to you.

  Position of css element:

  Looking at your code I noticed that you put in your div a class with the name 'nft-view' that receives a 'position:absolute', but it doesn't have a relative div as a reference. The modifications I suggest are to add a 'position:relative' to the nft-all class and change the top to zero in the 'nft-view' class, as follows:

  .nft-all {
  position: relative
  }
  .nft-view {
  position: absolute;
  top: 0;
  width: 18.9rem;
  height: 18.9rem;
  border-radius: 3%;
  }
  

  Hope you find this useful 😄 Overall, the solution you submitted is great!

  Marked as helpful

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the <footer"> element has not been placed at the bottom yet. So let me explain, How you can place the component at bottom with using fixed positioning for footer

  ---

  ---

  • Luckily you already used Flex layout of css to center the component, So you just want to add fixed position for <footer> element to place it in bottom of the page

  footer {
  position: fixed;
  bottom: 1em;
  }
  

  ---

  • Now your component has been properly at bottom

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0