NFT Preview Card Component

Community feedback

• 

  P

  Oscar•260

  @OscarRobertRodriguezPosted over 2 years ago

  i would would change the following as a suggestion to make it responsive.

  .container { min-height: 100%; display: grid; align-items: center; justify-content:center; }

  .box { border-radius: 3%; padding: calc(24 / 16 * 1rem); padding is 24px this converts to rem display: flex; flex-direction: column; background-color: var(--Very-dark-blue); box-shadow: rgb(0 0 0 / 0.5) 0 0 30px; font-size: .9rem; align-items: center; /* width: 290px; */ remove because makes it non responsive width: 100%; max-width: 350px; box-sizing: border-box; }

  .nft-image { border-radius: 3%; justify-content: center; /* height: 300px; / remove / width: 290px; */ remove width: 100%; max-width: 300px; display: block; this gets rid of the extra spacing when overlay is on top }

  Marked as helpful

  1

  ---

  

  Mayara S Carvalho•50

  @mayspiekPosted over 2 years ago

  @OscarRobertRodriguez Tysm all of this helped me a lot! After some research, instead of the width and max-width, I added the function min(); to the width and it worked just fine! The extra spacing was bothering me a little bit lol, thank you again.

  0

  

  P

  Oscar•260

  @OscarRobertRodriguezPosted over 2 years ago

  @bregadero something's not exactly lining up on mobile the container isn't centered for some reason

  0

  

  P

  Oscar•260

  @OscarRobertRodriguezPosted over 2 years ago

  @bregadero okay yeah min() is cool. I made a mistake, instead of
  justify-content on the container do this:

  .container { min-height: 100%; display: grid: place-items: center; }

  add and change these two properties on .box.

  I put 350px because that's the max width that card gets on bigger screens.

  .box {
  box-sizing: border-box;
  width: min(100%, 350px);
  }
  
  .card-image{
    add
     width: min(100%,300px);
  }
  
  .overlay {
    dont need  because set it on .card-image
     width: min(100%, 300px);
  }
  
  .nft-image {
   dont need  because set it on .card-image
    width: min(100%, 300px);
  }
  
  add this to line up text with img
  .text {
   width: min(100%, 300px);
  }
  

  0
• 

  Abdelrhman Kamal•450

  @AbdelrhmanX7Posted over 2 years ago

  hi Mayara S Carvalho your solution is awesome but i have a small comment => i prefer you to put (transition) in element not in hover to make transition work good for example .overlay { transition: 0.7; =>>> Here is the best place } .overlay:hover { transition: 0.7; =>>> Here is not the best place }

  Marked as helpful

  1

  ---

  

  Mayara S Carvalho•50

  @mayspiekPosted over 2 years ago

  @AbdelrhmanX7 Oh, right! Fixed it. Tysm

  0
• 

  Marcos Farias•50

  @MarcosFarias21Posted over 2 years ago

  Hey Mayara,

  Your solution is really good, but I would suggest to you to make the card border-radius a bit more round. (ficou excelente! ;D).

  1

  ---

  

  Mayara S Carvalho•50

  @mayspiekPosted over 2 years ago

  @MarcosFarias21 Realmente faltou um pouquinho no border-radius. Obrigada!

  1