NFT Preview Component

Community feedback

• 

  Pulkit saxena•890

  @Pulkit-s21Posted over 2 years ago

  @Koruxx I saw your site and code and there are a lot of bugs in it.

  1. The card is stuck at one place and if you go below 1440px width then it slides off the screen. I think it might be because of fixed the width of the body. You really dont need to do that ever.
  2. You used px a lot which isnt good for the responsive behavior. Try using rem em for more responsiveness.
  3. Never fix width with width and you don't need to do height: auto.

  Found errors but mostly they are of responsiveness so I suggest you watch Kevin Powell as he taught it very well in his courses and videos

  Marked as helpful

  1

  ---

  

  Cole Y.•60

  @KoruxxPosted over 2 years ago

  @Pulkit-s21 thank you for taking the time to go through my code and help me. So basically, I should never assign the body a width because if I do, my middle-aligned container will slide off any screen smaller than what I assign the width. Also, I should use em because a px font looks different on each screen, dependant on pixel density?

  0

  

  Pulkit saxena•890

  @Pulkit-s21Posted over 2 years ago

  @Koruxx yes if you assign a width to your body then the width wont change with the different screen sizes. If you don't assign it then its equal to the screen size that's why in the boilerplate we only assign min-height: 100vh to the body so that it takes full vh and not is done about the width. Px is bad because you are fixing the size of the font or padding margin or anything else and wont be responsive to the text in the button or to the root element or to the screen size. I learned this from Kevin Powell that you must try as much as you can from using these fixed sizes units because they cause a lot of problems in responsiveness.

  Marked as helpful

  1

  

  Cole Y.•60

  @KoruxxPosted over 2 years ago

  @Pulkit-s21 thank you!

  0
• 

  Chyunjet•620

  @JetyunPosted over 2 years ago

  in CSS

  1. Set the cube picture and container of the picture as position: relative.
  2. Set the icon view.svg as position: absolute.
  3. set the cube picture:active (to amend the condition of the picture when you clicked it to see the active state, not :hover) to opacity:0.5 which will make the cube picture 50% transparent when it is clicked so that you can view the icon view.svg behind the cube picture .

  Additional: you can put background color on svg file, and padding which will position the eyes to the place you want

  in HTML

  1. Put in the icon view.svg into the same container of the picture. Placed it the line before you put the cube picture in HTML so that they overlay with each other (make sure you do the step 1 and 2 in CSS for them to overlay).

  Marked as helpful

  1

  ---

  

  Cole Y.•60

  @KoruxxPosted over 2 years ago

  @Jetyun so I want to align the two images and I want to stack the nft image on top of the eye image. Then I want to modify my eye svg to have a blue background. Then I want to modify the active state of the nft image to lower its opacity so that I can see the eye image behind it?

  1

  

  Chyunjet•620

  @JetyunPosted over 2 years ago

  @Koruxx yup

  1