All comments

• 

  Brandon• 40

  @Lun0xxx

  Submitted almost 2 years ago

  Hi guys, my problem is that I don't know how to show the view icon when we hover the NFT image. If somebody can tell me how to do it, it would be great :) Thanks

  

  NFT Preview Card by Lunoxx

  3

  20

  

  Dr-Vegapunk007• 140

  @Dr-Vegapunk007

  Posted almost 2 years ago

  Hi,@Lun0xxx

  create a div inside your <section class="image-nft-container"> apply to it "position absolute" with the view icon and all styling that you need and set opacity to 0 when you hover set opacity to 1.

  I think it will be working also with display none when you hover display initial instead of opacity.

  Hope this will help you

  0

  This comment has received 1 replyShow
• 

  Fred James• 10

  @oliverjfred

  Submitted almost 2 years ago

  Having issues with border radius and little issues with responsiveness

  

  Responsive Profile Card using Html and CSS

  2

  40

  

  Dr-Vegapunk007• 140

  @Dr-Vegapunk007

  Posted almost 2 years ago

  Hello @oliverjfred,

  • set the height of the img same as the width this will solve your problem.
  • another way to do it is to place it directly inside <section class: "body"> without a div and apply to it position: absolute; border-radius: 50%; border: solid 5px white; and position it with right, top or left, bottom.

  Hope this will help you

  0
• 

  Chibuzor Isaac• 20

  @ChibuzorIsaac

  Submitted almost 2 years ago

  I personally found replacing the image on screen resize from mobile to desktop a huge challenge. Finally used the 'display: none' property and it worked. Feel free to let me know if there's any other way I could've done it. Also, I'd appreciate feedbacks on the design in general.

  

  Product Preview Card Component Challenge

  4

  40

  

  Dr-Vegapunk007• 140

  @Dr-Vegapunk007

  Posted almost 2 years ago

  Hello friend, Display: none; is not the best practice for this situation try to learn about <picture> element and use it in this situation

  Marked as helpful

  1
• 

  threshold• 50

  @thresholdtech

  Submitted almost 2 years ago

  Hi Guys,

  this is my fifth project. Well, it's so confusing tbh, and here's my result. I use 'grid' here, to divide the image and the text, I don't know if that is the right choice. I have an issue here, the discount price won't be centered when I use vertical-align: middle, any adv? TIA

  

  Product Preview Card Component (Perfume)

  3

  20

  

  Dr-Vegapunk007• 140

  @Dr-Vegapunk007

  Posted almost 2 years ago

  Hi @thresholdtech, you can use this to centered the discount price

  .price-remark{
  display: flex ;
  align-items: center ;
  }
  .h1,
  .h4{
  margin:0 ;
  }
  

  I use different method to do it in my solution you can see it here : https://dr-vegapunk007.github.io/

  0

  This comment has received 1 replyShow
• 

  Nutchapon Makelai• 270

  @kodaicoder

  Submitted almost 2 years ago

  • still got some confuse on image positioning , may be have better way to adjust a image position.
  • about components in react, may be it can splitting up more than 3 components that I has create.

  

  Product preview card component

  1

  50

  

  Dr-Vegapunk007• 140

  @Dr-Vegapunk007

  Posted almost 2 years ago

  Hi @NutchaponMake , you can set a div as background instead body with this styling:

  display: flex ;
  position: fixed  ;
  justify-content: center ;
  align-items: center ;
  left: 0  ;
  width:100% ;
  top: 0 ;
  height: 100% ; 
  

  you can see it in my solution link (https://github.com/Dr-Vegapunk007/Dr-Vegapunk007.github.io)

  Marked as helpful

  1

  This comment has received 1 replyShow