Skip to content
Submitted over 2 years ago

NFT preview card component solution

Katherine•100
@rendongzha
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

In the style guide, it stated "The designs were created to the following widths:

  • Mobile: 375px
  • Desktop: 1440px".

I am not sure what the best practice is to make the page responsive to the above screen widths. I had an @media query setting the max-width to be 400px and reducing the root font size, and then the page looked alright on my phone.

Thanks in advance for any suggestions!

Community feedback

  • Mahmoud Mohamed Abd Elaziz•470
    @ehoda9Posted over 2 years ago

    Mobile: 375px Desktop: 1440px".

    • you can use a pixel-perfect helper tool or extension and use chrome developer to resize your screen to 1400x800
    0
    Katherine•100
    @rendongzhaPosted over 2 years ago

    @ehoda9 Thanks for the advice. Will definitely try the tool!

    0
  • Abdul•8,540
    @SamadeenPosted over 2 years ago

    Hey!! Cheers 🥂 on completing this challenge.. .

    Here are my suggestions..

    • You should use <main class="container"> instead of <div class="container">.
    • You can wrap your attribution section in a footer tag to avoid accessibility issues.
    • You should add a alt text to your img tag to aid screen-readers

    This should fix most of your accessibility issues

    . Regardless you did amazing... hope you find this useful... Happy coding!!!

    0
    Katherine•100
    @rendongzhaPosted over 2 years ago

    @Samadeen Thanks for the suggestions! I will try to use more HTML5 semantic tags in the future.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord