Tengo un popup que quiero escalar a un tamaño más grande en resoluciones bajas para celulares, pero no me funciona en este elemento en especifico no sé por qué. Se supone que con en el CSS debería funcionar, pero no, estoy usando el "scale" y ya probé el "zoom" pero tampoco ha funcionado. No sabría a ciencia cierta por qué no se puede escalar o qué está impidiendo que lo pueda escalar a mi gusto. Gracias por la ayuda de antemano.
** -- ** ** -- ** ** -- ** ** -- ** ** -- ** ** -- ** ** -- ** ** -- ** ** -- ** ** -- ** ** -- **
function togglePopup() {
document.getElementById("popupData").classList.toggle("active");
}
//Agregado para probar
document.addEventListener('click', togglePopup);
body {
background-color: rgba(104, 46, 212, 0.9);
}
.icon_popup {
font-size: 500%;
color : orange;
}
.overlay {
position : fixed;
top : 0px;
left : 0px;
width : 100%;
height : 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index : 1;
display : none;
}
.popup .content_popup {
position : absolute;
top : 50%;
left : 50%;
transform : translate(-50%, -50%) scale(0);
background : #fff;
width : 500px;
height : 380px;
z-index : 2;
text-align : center;
padding : 45px;
box-sizing : border-box;
font-family: "Open Sans", sans-serif;
border : 2px solid rgba(102, 100, 105, 0.85);
}
.content_popup .close-btn {
cursor : pointer;
position : absolute;
right : 20px;
top : 20px;
width : 30px;
height : 30px;
background : #222;
color : #fff;
font-size : 25px;
font-weight : 600;
line-height : 30px;
text-align : center;
border-radius: 50%;
}
.popup.active .overlay {
display: block;
}
.popup.active .content_popup {
transition: all 600ms ease-in-out;
transform : translate(-50%, -50%) scale(1);
}
.popup.active .title_popup {
font-size: large;
}
.popup.active .body_popup {
font-size: medium;
}
@media screen and (max-width: 600px) {
.popup.active .content_popup {
transform : translate(-50%, -50%) scale(1.5) !important;
}
}
<div class="popup" id="popupData">
<div class="overlay"></div>
<div class="content_popup">
<div class="close-btn" onclick="togglePopup()">×</div>
<div class="icon_popup">
<i class="fas fa-exclamation-circle icon"></i>
</div>
<div class="title_popup">
<h1>Envío satisfactorio</h1>
</div>
<div class="body_popup">
<p> Te contactaremos lo más antes posibles. Gracias </p>
</div>
<div class="footer_popup">
</div>
</div>
</div>