Responsive QC Code Components with mobile and desktop view

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

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