testing Sass on QR code page

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted 5 months ago

  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

  Marked as helpful

  0

  ---

  

  Carlos Maracara👷👨‍💻•800

  @MaracaraCarlosPosted 5 months ago

  Hello @ChamuMutezva thank you for your response, it helped me a lot to reinforce the theory in CSS and HTML, and I also learned several interesting things in the article you sent.

  0