Responsive nft preview card component

Community feedback

• 

  Macdeesh•610

  @macdeeshPosted over 2 years ago

  Just a few important things to add to what @christianhelms said :

  1. What do you expect when you see a hover effect? You know something is clickable, right? That means it's an interactive element. Every place you see a hover style, you need to include an interactive element, like an anchor tag or button. That is essential to fix.

  2. I would do the hover effect on this using pseudo-elements like ::before or ::after rather than adding extra in the HTML. But that's not essential. Also, for the other SVG icons as the icons are all decorative.

  3. Use '/' instead of '' as path segment delimiter for your "href" and "src" : href=assets\images\favicon-32x32.png>, src=assets\images\image-equilibrium.jpg

  1
• 

  Christian Helms•40

  @christianhelmsPosted over 2 years ago

  Hello,

  Regarding your question/comment. Things can get tricky between dev and prod versions at times. It doesn't look like you're using any kind of a bundler for this project or any boilerplate. I'd be curious if that would help solve the issues possibly. You could also try hosting on a different service like Netlify or Vercel if your project supported it to see.

  I actually just had a similar issue. I was hosting via Vercel and when it originally deployed my project it made my card a lot wider than it was on my local env. So I deleted it and redeployed it and it worked for me.

  I'd probably **remove the <br> from line 19 on your index.html file. See if adding position: relative to your creator image will help. Consider trying align-items: center also for your creator div so it will even them out horizontally and that could help.

  Also, try using a flex box property to separate your ETH icon & price from the time icon & text. It should fix that spacing on the time where it's not obeying the padding from the card div.

  Here's a really good resource to use for your flex boxes

  Beyond that, just try to make your code a bit cleaner and more accessible.

  1. Wrap your index.html with a <main> tag.
  2. Add alt text for your images (looks like you have on some)

  If you need a reference take a look at the one I did. It's made in Next.js so just look at the index.js inside the pages folder and its using Tailwinds which is CSS directly in the JSX elements. Hopefully that will help!

  I think you did a good job. There are a lot of moving parts in code so learning is what it's all about.

  0