NFT card using @media tag for responsiveness

Community feedback

• 

  Amon•2,560

  @A-amonPosted about 3 years ago

  Hello! Great effort~ 😉

  Here are some suggestions( or things I think can be fixed)

  • Remove the height setting from .card. Instead, set the height for the image, either in px or other units. I don't recommend using vh or vw for this height. 😀
  • Remove top setting from .card. Then, set the body's height to 100vh. (The card is now at center for any size 🥳)
  • You are missing h1 and h2 elements. Maybe put a h1 element containing the challenge's title like <h1> NFT card challenge </h1> and hide it using a screen-reader only 👁 class (You can check these out - Ref1, Ref2. Also, read this to find out about heading tags' usage.
  • To center vertically, the icon and text inside .eth and .time respectively, you can give those two classes this: display:flex; align-items:center;.
  • Instead of using position:absolute; right:1.5em; on .time to align it to the right, maybe you can try out justify-content:space-between; on .feature. 😉

  Awesome work! 😀

  Marked as helpful

  0

  ---

  

  Novi•10

  @nlorensPosted almost 3 years ago

  Hi @A-amon !

  Thank you so much for your feedback! I really appreciate it. My code looks more clean now after using display:flex as you have suggested. And the result looks neater. I struggle with aligning items, as you can see from my code, I tend to code it too specific😂 and it becomes less responsive. Happy to learn new ways to align/centering things!

  Wow I didn't know that h1 is very important, so thank you for highlighting that! I need to spend some time to read the links that you shared and then I will also add the h1 tag to my solution😃

  Regarding your first point, why you don't recommend using vh for the height?

  0

  

  Amon•2,560

  @A-amonPosted almost 3 years ago

  @nlorens It will surely get better over time! 😉 About the vh for this image's height, it would be because different devices might have different heights so it would be hard to keep this image's appearance consistent on all of them if you use it. 🤔 This is just my opinion tho 😂!

  1

  

  Novi•10

  @nlorensPosted almost 3 years ago

  thank you @A-amon 😁

  0

  

  Amon•2,560

  @A-amonPosted almost 3 years ago

  @nlorens Glad to help!

  0