Nft_preview_card

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello @Zsollt88, congratulations for your new solution!

  Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.

  The main difference between width and max-width is that the first property is fixed and the second is flexible, for example, a component with width: 340px will not grow or contract because the size will be ever the same, but a container with max-width: 340px or min-width: 320px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

  }
  #previewCard {
      max-width: 300px;
      height: 500px;
      background-color: hsl(216, 50%, 16%);
      font-family: 'Outfit', sans-serif;
      color: hsl(0, 0%, 100%);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 25px;
      border-radius: 25px;
  }
  

  👋 I hope this helps you and happy coding!

  10

  Marked as helpful