Frontend QR Code

Hi NewGuy! Great job on your solution! I took a look at your implementation and I have a suggestion on how to fix the border radius issue.

First, you need to remove the padding around the img. This interferes with the border-radius and gives it a non-uniform appearance.

Next, remove the manual width: 255px. This will cause the image to explode out of the container but we can fix that by setting max-width: 100% so that the image does not get bigger than its container.

This way, the image size is set by the container plus the container padding that you have set. Doing this will let the image sit nicely in line with the text.

Now the image should have the proper border radius. This next and final step is optional, but I would also recommend reducing the border radius to something like 10px. That way, it looks like it fits nicely with the border radius of the whole card.

If you would like to know more about how to get the perfect border radius, you can check out this useful article.

In the end, your code should look a little something like this:

.QR-container img {
	max-width: 100%;
	margin-bottom: 1.5rem;
	border-radius: 10px;
}

I hope this helps!