QR Code Component using Next.js, Typescript and SASS

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Anthony, welcome to Frontend Mentor, and congrats on completing your first challenge!

  As for your question, this is meant to be a very basic challenge and is suitable for those who are just starting out with Frontend Mentor, and so this challenge just has one layout instead of a mobile and desktop layout. Having said that, you can make your component responsive by changing the width: 16rem to max-width: 16rem in your container, and also the image can have a width: 100%; these two changes should make the component resizable.

  Also, do have a look at the issues listed in your report and see how to fix them. An easy one is the issue on needing a main landmark, which is something for semantic HTML, as this would help screen readers pick up on the main content of your site. To fix this, just change one of the divs surrounding your content to a main (can try the Home div).

  The rest of the challenges are will have a mobile and desktop view, and so you can practice using media queries and design responsiveness then. Once again, a warm welcome to Frontend Mentor, and hope to see more solutions! 😊

  Marked as helpful

  1