Quiero crear un pop-up para dispositivos móviles, el cual se abre después de una segundos de entrar en la web. Lo he creado en un Block UX de WordPress.
EDITO LA PREGUNTA CON MÁS DETALLES
Con la ayuda de @Cris223511.dev cambia la apariencia y ahora se ve mucho mejor.
Pero sigue teniendo el problema que cuanto más grande es el dispositivo, más aumenta el padding
superior e inferior.
Y cuando añado un Gif en lugar de una imagen, aumenta más el padding
.
¿ Como corregir estos errores ?
document.addEventListener("DOMContentLoaded", function () {
setTimeout(function () {
document.getElementById("popup").style.display = "block";
}, 2000);
document.getElementById("close-btn").addEventListener("click", function () {
document.getElementById("popup").style.display = "none";
});
});
#popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: max-content;
max-width: 80%;
max-height: 90%;
background-color: #fff;
padding: 20px;
border-radius: 20px;
text-align: center;
overflow-x: hidden;
}
.popup-text p{
text-align: center;
font-size: 24px;
margin-bottom: 20px;
color: rgb(203, 100, 15);
}
.popup-text h2 {
font-size: 24px;
margin-bottom: 10px;
}
.popup-gif img {
display: block;
margin: 0 auto;
width: 90%;
height: 300px;
object-fit: contain;
}
#close-btn {
display: block;
margin: 0 auto;
padding: 10px 20px;
background-color: #26c995;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
<div id="popup">
<div class="popup-content">
<div class="popup-gif">
<img src="galletas-al-horno.gif" alt="GIF animado">
</div>
<div class="popup-text">
<h2>¡Bienvenidos de nuevo!</h2>
<p> Por fin puede comprar desde la comodidad de su casa</p>
<p> Podrás disfrutar de precios exclusivos que no encontrarás en ningún otro lugar. ¡Bienvenido a una nueva
forma de comprar en linea!</p>
</div>
<button id="close-btn">Cerrar</button>
</div>
</div>
h2
... que bastaría con ponerle untext-align: center
... codepen.io/christopher-ps/pen/qBJpBdw