Skip to content
Submitted over 2 years ago

Responsive QC Code Components with mobile and desktop view

Cyber12341•30
@cyber12341
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

what is the best practice for measurement unit is it rem, em, px, etc?

Code

Please log in to post a comment

Log in

Community feedback

  • Stephen Thagana•120
    @StephenThagana
    1. FLUID LAYOUTS -To allow webpage to adapt to current viewport width(or even height) use % (or vw / vh) instead of px for elements that should adapt to viewport 2)RESPONSIVE UNITS
      • use rem unit instead of px for most lengths i.e fontsize to make it easy to scale the entire layout(up or down) autmatically 3)FLEXIBLE IMAGES
    • images dont scale automatically as we change viewport so use % for image dimensions
    Marked as helpful
  • Hassia Issah•50,390
    @Hassiai

    Replace <div id="qr-container">with the main tag , <h2> with<h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. add the alt attribute to the <img> to fix the error issue . alt = " " , the value for alt is the description of the image. for more on semantic html visit https://web.dev/learn/html/semantic-html/.

    There is no need to give the body a padding value this is making the content overflow on smaller screens. instead of width use max-width for this challenge for a responsive content that won't require a media query

    Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To

    Hope am helpful HAPPY CODING

    Marked as helpful

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