QR Code Component

Community feedback

• 

  khushboo khatwani•1,070

  @khushi0909Posted over 1 year ago

  1. its ok to add grid but i think you need more learning and practice for grid and i think you must have used grid template-column 1fr 1fr 1fr or there are other ways also to do .read

  https://css-tricks.com/snippets/css/complete-guide-grid/

  2)you can also use flexbox for centering or transform:translate() etc

  3)i cannot see any responsiveness implemented ,it will be great if you do that with for ex media queries etc

  4)Read about h1 tag its the most important and every website should have atleast one https://www.semrush.com/blog/h1-tag/

  5)you should learn about semantics HTML and using it for ex footer ,main etc

  All the best

  Marked as helpful

  0
• 

  Felice Nicolas Barcellona•490

  @feliceNicolasBarcellonaPosted over 1 year ago

  try this

  @media only screen and (max-width: 1440px) body { background-color: #d5e1ef; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 98vh; /* padding-top: 4%; / / padding-bottom: 2%; */ }

  Marked as helpful

  0
• 

  Aq1q•220

  @Aq1qPosted over 1 year ago

  It looks like display grid doesn't change how your body behaves, it does not center your component

  You could give it height of 100vh to take whole page, display it as flex, make it's direction column so that your footer stays at the bottom and justify it's content to the center, so your code would look something like this:

  body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
  }
  

  This also makes paddings in your body, and both margins in your .card-container obsolete, because you already have it centered within body tag

  Marked as helpful

  0