Responsive NFT Preview

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Enderzin! 👋

  Good effort on this challenge! 👍 However, you might want to adjust the font-size of some text. As you might notice in the design comparison, some text is bigger compared to the design. So, it is worth fixing this issue.

  Use interactive elements (a) for any elements that have :hover or :active states. Also, I recommend creating a custom :focus-visible styling for any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (by using Tab key) easily.

  What is the purpose of <span class="hidden">_</span>?

  I strongly recommend not using !important. Luckily, it can be easily fixed by moving the media query all the way to the bottom of the stylesheet. This way, you should not need any !important. Keep in mind to always put the media query after the initial styling.

  I hope this helps!

  Marked as helpful

  1

  ---

  

  Ariel•110

  @ArielNyanPosted over 2 years ago

  @vanzasetia Hello 👋,~

  Thanks for the feedback and all the tips, and yes, that helps a lot, especially about the use of !important, I didn't notice that I could use it that way.

  About the <span class="hidden">_</span> was just to me to have a space between the <span class="name">Jules Wyvern</span> and the rest of that p, it was the only way I found back then lol.

  And about the font-size I'll pay more attention to that, I thought at first was just because I have a small monitor or something, but appears it wasn't...

  And again, thank you for the help

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Rav1el You're welcome! Glad to know that it helped you a lot! 😄

  So now, do you have a better solution on how to create a space between the paragraph and the avatar?

  0