testing Sass on QR code page

Hi Carlos Maracara

Having gone through your project, here is some points to consider

• instead of using <section role="main" class="container"> , html has the main element that should be used.
• the image in my view carries an important message , therefore it should not be used as a background image . Preferably use img element with a description in the alt value
• setting the body element in the css to height: 100vh; works , but for best practice instead use min-height: 100vh; - this does allow scrolling if the content does not fit
• keep specificity as low as possible by simply appying styles to the target class. The following body .container .codigo-qr , is not necessary as that would cause maintenance and debugging problems especially in big projects. You can just use .codigo-qr
• using fixed heights and widths in your container elements will cause responsive issues, for example

body .container {
  height: 500px;
  width: 320px;
  border-radius: 20px;
  background-color: #ffffff;
  padding: 15px;
}

For the above the height will cause content to be cut off , if it does not fit the container. Let the content decides the height by using the size of the content, paddings and margins where necessary. For width , using max-width to allow the container not to exceed a certain width instead of a fixed value. Also font sizes and these dimensions should be in rems not px, the following article Why font-size must NEVER be in pixels can help you understand the reasons behind the suggestion