QR-code-component

I am proud that I solved the small gap issue between the photo container and the text container caused by the div line break. The solution was to set the font-size of the image to 0, which prevented errors from appearing on the bottom left and right corners when applying border-radius to the image.

The difficulty lies in not being sure about the appropriate size for the cards—whether to allocate them based on screen size or set a fixed width. As a result, in the first design, I ended up creating a very peculiar RWD (responsive web design) setup. After reviewing my peers' examples, I realized that using max-width to set the maximum width is sufficient, without needing to use media queries to differentiate font sizes across different screen sizes.