QR code component - Basic implementation

Till now i haven't seen any design that is properly sized like this so nice 👍🏻 But one this is there which needs attention its the width of text elements

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

• Let me explain, How you can easily center the component for better layout without usage of absolute positioning.

• We don't need to use absolute to center the component both horizontally & vertically. Because using absolute will not dynamical centers our component at all states

• To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

• For this demonstration we use css Grid to center the component

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

• Now remove these styles, after removing you can able to see the changes

.qr-code-block {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
}

• Now your component has been properly centered.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

.qr-code-block strong
{
display: block;
color: black;
margin: 20px 0 15px;
/* padding: 0 20px; */ remove this
font-size: 20px;
}

remove the padding so the text will match the design and add this also

.qr-code-block figcaption 
{
color: #797b87;
padding: 0px 8px;
}