QR code components using semantic html and css styling

Community feedback

• 

  imad•3,330

  @imadvv

  Posted almost 3 years ago

  Greeting Ngbe Gloria James!! Congratulations for completing your challenge!, 👏👏👏 well done.

  you did great work on this one, You've done a really good work in your first solution!, and for you question, I saw that you're using margin: 100px auto; on card to center it on the middle of the page, which work's, however they're an alternative ways to do so, you can use either grid or flex to have a full control over the layout, and you can easily manipulate on different screen sizes.

  for example using grid, you can start using the body as a reference to control the layout, you start by give it a min-height:100vh to fill the browser screen size, and display it as a grid system, display: grid; and place-content: center; to center content perfectly on the middle of the page no matter what, from there you can safely remove margin: 100px auto; from the card,

  body {
  min-height: 100vh;
  display: grid;
  place-content: center;
  
  }
  
  .card {
  	
  	/* margin: 100px auto; */
  	
  }
  

  if you apply this changes, you will notice that they're no different, but if you open the DevTools, and go to the body, you will see a grid system, that you can apply different proprieties to it, and you can easily control the layout on more robust way on different screen sizes.

  useful resource:

  • https://web.dev/learn/css/grid/
  • https://css-tricks.com/a-complete-guide-to-css-media-queries/
  • https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

  Hope this help!

  overall you did Great work matching the design, Happy Codding, and Keep up the Good Work

  01

  Marked as helpful
• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  Hi Ngbe Gloria, welcome to Frontend Mentor, and well done in completing your first challenge! You did a number of things well here, such as not setting a fixed pixel width on the image, and also in making the solution close to the design. You just need to add the Google Font in the style guide; instead of pasting the link in the style guide, you'll have to visit the link and select the font faces you need (as in the font weights), then copy the link provided and paste it back into the head tag.

  About your question, I just got two suggestions here:

  1. I see you using margins to making the component centered; what you can try instead is to add this to the body selector:

     body {
        display: grid;
        place-content: center;
        min-height: 100vh;
     }
     

  2. To make the card more responsive, change width:300px to max-width: 350px on the container and change the margins to margin: 1rem just so there's some space around the card on smaller screen sizes. You can experiment with the max width value to see how close you can get to make it match the design.

  Try resizing the browser and the card should be responsive!

  01

  Marked as helpful