Responsive QC Code Components with mobile and desktop view

Community feedback

• 

  Stephen Thagana•120

  @StephenThaganaPosted almost 2 years ago

  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

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  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

  0