QR Code Component

Community feedback

• 

  Jeffrey Tuason•550

  @Tuason066Posted over 2 years ago

  Hi Andrew, 👋

  1. What is the best way to center this card?

  • replaced your classes into this classes grid place-items-center.
    Use place-items-center to place grid items in the center of their grid areas on both axis.
  • Check this out for your reference: https://tailwindcss.com/docs/place-items

  2. How can I change the background color of the page?

  • to change the background color of the page just simply add the body tag a class of bg-(your desired color).
  • Check this out for your reference: https://tailwindcss.com/docs/background-color

  You can also check my solution to this challenge. I am also using tailwindcss. https://www.frontendmentor.io/solutions/qr-sKgoF9EIik

  Happy Coding! 😊

  Marked as helpful

  0
• 

  David Miller•180

  @HumerousPosted over 2 years ago

  Hi Andrew,

  Just some feedback for your design.

  Firstly well done on completing the assignment.

  Secondly, you must always make sure to run your code through HTML/CSS validators, to show you errors, etc. There are quite a few errors, so maybe slow down and focus on lean and cleaner code

  Also, when looking at the brief, it seems that your typography and line spacing are incorrect.

  as well as your padding, and margins are not fluent.

  I quick and easy way to centre your container is by setting the body element:

  body { margin: 100px auto; backgroud-color: hex color; }

  Please take a look at my solution for an example:

  https://www.frontendmentor.io/solutions/qrcodecomponentmain-1sMNGUbgPi

  Happy coding :) and please mark if this was helpful.

  Marked as helpful

  0
• 

  Yan Negrão•60

  @NigraumPosted over 2 years ago

  Answering your two questions, add these properties on body css

  body { display: flex; align-items: center; justify-content: center; background-color: hsl(212, 45%, 89%); }

  To align using body you need to put your qr code card inside a container.

  1

  ---

  

  Yan Negrão•60

  @NigraumPosted over 2 years ago

  With tailwind you can add class="flex items-center justify-center bg-[The name of color you put on tailwind config]" to body

  0