Card with QR code using Html and Css

Hi. You don't have to specify exact dimensions for image. Only set size for white container, then set image to take up 100% width of the container. I added padding later to get white border around image, but despite that image takes up 100% of width

div#qr { padding: 15px; }

img#qr-image { width: 100%; }

Basically just these 2 rules set image in right place, then adds padding/border around image and text elements.

Hi Guerra, congrats on your first solution! You did a great job. Now in order to answer your query let's take one parent container with two child, first child as 'QR code image' and other child as 'text-container'. Give parent container as display: flex then give both child as flex-grow: 1 , in this way there will be no need to manually fixing of height and width and both the child will take equal spaces in the parent container. Try the code below in your solution-

.card{ position: relative; display: flex; flex-direction: column; width: width: 360px; } 
.qr-code{flex-grow: 1}
img{width: 100%}
//no need for height value it will automatically adjust itself.

happy coding!!!!