QR Code Component

Here are my suggestions :

1. As 'p' and 'h3' is block level element it will occupy the full width of its parent container, so you don't need to give the paragraph or the heading an explicit width(unless the design requires it) just give it a padding and it will adjust itself with various screen sizes.

p{
/* width:80%; */
}

1. Even the height of the container (.centered) should not be fixed, it should adjust with the content. So, if the content is big enough the height should increase and if the content is not big enough the height should decrease. So, height on centered class is not neccessary.

2. Use max-width instead of width for the width of your container as, because it allows the container to be flexible and adapt to different screen sizes. Even if you are using width use rem units for the width instead of %units. This will make your design consistent across various devices, as percentage units boxes are dependent on their parent container which can cause the content to overflow.

This will make your design more consistent and responsive across various devices.

The card component is not looking good on my samsung j3. You can set the width of .container class to 80% in the @media rule. It is apperaing very slim on the screen.