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%;
}
}
Why does it not work?
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%;
}
}