Skip to content
Submitted almost 2 years ago

QR code component

Mateo Rinland•210
@mateorinland
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Should I have used media queries for this one? I thought I would need to but then I previewed it in the Chrome dev console changing the width to 375px and it seemed in line with the mobile-design image. When adding a media query I wasn't sure what to change within it.

Any feedback about anything weird I'm doing is more than welcome!

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted almost 2 years ago

    Hello 👋. Congratulation on successfully completing your first challenge 🎉 ! !

    I have some recommendations regarding your code that I believe will be of great interest to you.

    • In this challenge it is not necessary to use media query, however using DevTools you should review your solution in a screen of 320px width, this width is the minimum necessary to avoid distorting a website.
    • The width: 100vw property in the body tag is not necessary. This will create a horizontal scrollbar on some devices.
    • Use min-height: 100vh instead of height: 100vh. The height property can cause your component to be cut off on small screens, such as a mobile phone in landscape mode.
    • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

    I hope you find it useful! 😄

    Happy coding!

    Marked as helpful
    2
    Mateo Rinland•210
    @mateorinlandPosted almost 2 years ago

    @MelvinAguilar That was very useful. Thanks a lot!

    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