NFT card for mobile first

Community feedback

• 

  Yevhenii Kozhevin•40

  @DexLuthorPosted almost 2 years ago

  Hey man👋 Great job done there :)

  I have a few nitpickings, if you don't mind:

  • I can see there a whole bunch of empty alt="" or srcset="". Maybe it would make sense to either make them work or get rid of them, if you consider them to be useless in your case
  • you've used <hr>, but if you zoom in you will see it looks quite ugly (that's the default styling of it). Consider e.g.

  hr {
      border: none;
      height: 1px;
      background-color: var(--Verydarkblue);
  }
  

  • some1 has also mentioned to me that using gap for flex isn't supported (supported by 93% of users) everywhere currently. Consider margins/paddings instead
  • you have the styles below twice for overlay 👻

      height: 100%;
      width: 100%;
  

  • with respect to your question now. AFAIK opacity property is being inherited. So when you set opacity to .overlay to 0.5 your img inside that div inherits the same opacity. Another way to work it around is to use background-color: rgba(r,g,b, opacity). This won't be inherited

  0