QR Code Component

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

1. 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! 😊

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.

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.