QR Code page using HTML/CSS

Community feedback

• 

  Gabriel Morandi de Mello•450

  @gabrielmorandiPosted almost 2 years ago

  Hi @krystinee👋, welcome to the Frontend Mentor Community!

  I have some suggestions you might consider to improve your code:

  • Some elements of your site are already pre-styled by the browser itself, so to remove these pre-styles and minimize inconsistencies in browsing, a css reset is commonly used, see about that here.

  • After applying the CSS reset, to effectively center your .qr-component in the center of the <main> tag, just apply this to your css:

  main {
           display: grid;
           place-items: center;
           height: 100vh;
  }
  

  After applying this style, just go to your .qr-component and remove the margin: 250px auto;

  • To make the contents of your .qr-component one below the other, just put in your style flex-direction: column; this style will make each child element of the .qr-component have a width of 100% and placing one below the other.

  • Your @media screen and (max-width: 1200px) { is causing the white border to only appear on devices that have a width less than or equal to 1200px.

  • In this element selection you made in your css section, .qr-component { you are selecting all sections and all elements with class .qr-component from your HTML, and you don't want that, you want to style your .qr-component then select it normally as you did inside your @media , because if there are other sections in your future projects this will cause style collisions.

  • Instead of putting margin-bottom: .5rem; in your elements apply the gap: .5rem; inside your .qr-component class, doing this way every element inside that class will have exactly the defined distance from one to another.

  • And finally use the <footer> tag instead of <div class="attribution">. The <footer> element contains information about the author of the page and the copyright of the site.

  I hope those tips will help you!

  Good job, and happy coding! 😄

  0

  ---

  

  Krystine•10

  @krystineePosted almost 2 years ago

  @gabrielmorandi Hi, these helped a lot! Thank you!

  1
• 

  Khondoker Aashabul Imam•260

  @aashabulPosted almost 2 years ago

  • you can simply avoid media query and set the card with to less than 347px. Because in the given design files, the card component does not shrink when viewport changes from desktop to mobile.
  • you can just remove the media query and keep a smaller width. That will do the work.
  • Also you can check my solution in any case you need reference https://github.com/aashabul/QR-code-component-html-css

  0

  ---

  

  Krystine•10

  @krystineePosted almost 2 years ago

  @aashabul thank you for the suggestion!

  0

  

  Khondoker Aashabul Imam•260

  @aashabulPosted almost 2 years ago

  @krystinee You are welcome.

  0