Skip to content
OverviewSolutions
2
Comments
2
Christian Helms
@christianhelms

All comments

  • Christian Helms•40
    @christianhelmsPosted over 2 years ago

    Great job! I like it a lot. It looks really similar to the design file.

    Just a few things to note.

    1. Wrap it in a <main> tag for accessibility
    2. Always add alt properties to images for SEO and accessibility
    3. Don't use <p> tags with a <ul> or <ol> try to use <li> instead (list item)

    One thing I really liked is that you added the shadows. I didn't even add shadows on mine!

    Marked as helpful
    1
  • Mohyen_Takouteu_Junior•20
    @MohyenTakoueuJuniorSubmitted over 2 years ago

    Hello every one, when i publish my webpage on github the display stle change and things beome weird while on my locale host it's all good. Both sites ( on locale host and the one i hosted on github) has thesame code. Please help me figure out this problem, THANKS.

    Responsive nft preview card component

    2
    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