0

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.

** -- ** ** -- ** ** -- ** ** -- ** ** -- ** ** -- ** ** -- ** ** -- ** ** -- ** ** -- ** ** -- **

introducir la descripción de la imagen aquí

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()">&times;</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>

2
  • Solo no te deja escalar pero puedes modificar otras propiedades o no puedes agregar ninguna propiedad?. Solo por probar dale a intentar con @media screen and (max-device-width: 600px).
    – Ange Reyna
    Commented el 24 ene. 2021 a las 12:19
  • Probándolo bien, no me deja agregarle NINGUNA propiedad Commented el 25 ene. 2021 a las 4:32

2 respuestas 2

0

Igual no es la mejor solución, pero puedes probar con font-size: (aunque sea especifico para fuentes se puede utilizar para agrandar cosas) y asegurate que el scale esta como transform: scale(2.0); para hacerlo el doble de grande

0

Ya solucioné, me faltaba una línea de código en el HTML. No sé por qué...

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.