QR Code Component using CSS, BEM, Flexbox

Hi @rgap,

Congratulation for successfully completing your challenge, you did very well...

Based on the CSS code you provided, it seems that the width of the .box element is set to 20%. This means that the width of the .box element will be 20% of its parent container's width. When displaying on a mobile screen, it can cause the .box element to shrink and the text within it to overflow. This can result in the text not fitting within the container and appearing outside of it.

To fix this issue, you might consider using media queries to adjust the width of the .box element for different screen sizes. Such like CSS code snippet below:

@media (max-width: 480px) {
    .box {
        width: 80%; /* Adjust the width as per your requirement */
    }
}

You can customize the styles for different screen sizes and ensure that the text fits within its parent container without overflowing.

Hope that could be Helpful. Keep happy coding...