QR Code Component built with HTML & CSS

Hey! @Olarra18 Thanks for the feedback... I was wondering on how to make it responsive? I presume you need to use bootstrap to be able to accomplish it but I wasn't sure...

@CoolCoder24 here is the CSS I used to create my own responsive layout

/*Mobile view*/
@media screen and (max-width: 767px){
/*will create 5% space around the object from outside (at my own understanding on margin) or you can use margin-top: 5%; to only apply the space at the top because the reason of the margin to drag the object down away from the top edge*/
body {
margin: 5%; 
}

/*general container that hold both the image and the text below it*/
/*the html body total height is 100vh=100%, so this container is taking 75vh=75% out of the 100vh=100%*/
.container {
max-height: 75vh;
max-width: 65vw;
}

/*The top box that contain the image only*/
/*The image is using a permanent fixed height which is 300px, while the width is 100% length responsive to the device width (I think that is the best thing to use for responsive layout)*/
.img-box {
height: 300px;
width: 100%;
}

/*The bottom box that contain the text only*/
/*The box is using a permanent fixed height which is 300px*/
.txt-box {
height: 300px;
}
}

/*Desktop & Tablet view*/
@media screen and (min-width: 768px) {

/*will create 5% space around the object from outside (at my own understanding on margin) or you can use margin-top: 5%; to only apply the space at the top because the reason of the margin to drag the object down away from the top edge*/
body {
margin: 5%;
}

/*general container that hold both the image and the text below it*/
/*the html body total height is 100vh=100%, so this container is using exact 100vh=100%*/
.container {
max-height: 100vh;
max-width: 30vw;
}

/*The top box that contain the image only*/
/*The image is using 45vh=45% out of 100vh=100% (it parent "container"), while the width is 25vw=25%*/
.img-box {
height: 45vh;
width:25vw;
}

/*The bottom box that contain the text only*/
/*The box is using30vh=30% out of 100vh=100% (it parent "container")*/
.txt-box {
height: 30vh;
}
}

You can set the body CSS as

body{
background-color: hsl(212, 45%, 89%);
max-height: 100vh;  /*limit the total height to 100vh=100%
display: flex; /*make the object float*/
flex-direction: column; /*make the object boxes in one line downward*/
align-items: center; /*place the object at the center of the document (since it parent is the html element) but at the top*/
justify-content: center; /*place the object at the middle of the document (since it parent is the html element) but it does not work as expected that is why I support it the margin attribute*/
}

.container {
display: flex;  /*make the object float*/
flex-direction: column; /*make the object boxes in one line downward*/
align-items: center; /*place the object at the center of the document (since it parent is the html element) but at the top*/
justify-content: center; /*place the object at the middle of the document (since it parent is the html element) but it does not work as expected that is why I support it the margin attribute*/
border-radius: 20px; /*curve the edge of the object*/
background-color: hsl(0, 0%, 100%);
}

.img {
margin: auto; /*place the image at the center of it parent*/
border-radius: 20px; /*curve the edge of the object*/
width: 100%; /*use 100% of it parent height "img-box"*/
height: 100%; /*use 100% of it parent width "img-box"*/
}
You can also request help from expert from the house