Why is my website's CSS code not responsive in bootstrap studio? - html

Question

I have made my website in Bootstrap Studio with HTML and CSS
This is what my website looks like on PC:
I have tried to use #media to scale a box up when it is viewed on mobile:
.container_a {
text-align: left;
padding: 0px;
padding-left: 0px;
margin: 0px;
padding-right: 0px;
color: #fafafa;
background: #000000;
padding-bottom: 0px;
border: 2.4px solid #999;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
height: 33%;
width: 30%;
}
.container_a {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#media (min-width: 768px) {
container_a {
text-align: left;
padding: 0px;
padding-left: 0px;
margin: 0px;
padding-right: 0px;
border-radius: 10 px;
color: #fafafa;
background: #000000;
padding-bottom: 0px;
border: 2.4px solid #999;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
height: 33%;
width: 30%;
}
}
#media (min-width: 320px) and (max-width: 768px) {
container_a {
width: 80%;
height: 35%;
}
}
But it doesn't work:
Why does it not work?

Answer 1

This does not answer your question, since it's typo related and will be closed, but you can really reduce your CSS to something more manageable since you have a bunch of redundant code:
.container_a {
text-align: left;
padding: 0;
margin: 0;
color: #fafafa;
background: #000000;
border: 2.4px solid #999;
/* Shorthand for border-radius */
border-radius: 7px 7px 0 0;
position: absolute;
top: 50%;
left: 50%;
/* combine into the translate shorthand */
transform: translate(-50%, -50%);
/* Put your mobile styles here */
width: 80%;
height: 35%;
}
#media (min-width: 768px) {
.container_a {
/* Only add the properties that change */
height: 33%;
width: 30%;
}
}