Estoy intentando aplicar un script de cuenta atrás en una imagen. El problema es que cuando le doy estilo me confundo un poco.
Si le aplico el estilo con #demo
, se aplica correctamente, pero el .caption
(texto de la imagen) se desborda.
.flex-container {
display: flex;
align-items: stretch;
background-color: none;
}
.flex-container > div {
margin: 5px;
line-height: 30px;
font-size: 15px;
}
#contenido {
background-color: none;
float: left;
width: 100%;
padding: 15px;
margin-top: 7px;
text-align: center;
}
.lateral {
background-color: rgba(236, 223, 255, 0.5);
text-align: center;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.grid {
display: grid;
margin: 0 auto;
grid-template-columns: repeat(var(--columnas), 1fr);
width: calc(100% - 20px);
max-width: 1200px;
gap: 10px;
}
.grid__item {
padding-top: 85%;
position: relative;
border: 1px solid;
}
.grid__img {
--object-fit: cover;
--object-position: center center;
display: block;
top: 0;
bottom: 0;
object-fit: var(--object-fit);
object-position: var(--object-position);
height: 100%;
width: 100%;
}
.grid__img,
.caption {
position: absolute;
margin: auto;
left: 0;
right: 0;
}
@media screen and (min-width: 600px) {
.grid {
--columnas: 3;
}
}
@media screen and (min-width: 400px) and (max-width:599px) {
.grid {
--columnas: 2;
}
}
@media screen and (max-width: 399px) {
.grid {
--columnas: 1;
}
}
.caption {
background-color: rgba(0, 255, 255, 0.5);
top: auto;
bottom: 0;
min-height: 40px;
text-align: center;
display: flex;
align-items: center;
padding: 0 10px;
}
#demo {
color: white;
}
<html>
<head>
</head>
<body>
<div class="flex-container" id="contenido">
<div style="flex-grow: 2">
<p class="lateral">
Gatos gatitos <br>
Gatos de prueba <br>
Vivan los gatos
</p>
</div>
<div style="flex-grow: 8">
<div class="grid">
<div class="grid__item">
<img class="grid__img" src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="">
<div class="caption">
<p id="demo"></p>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var countDownDate = new Date("Feb 7, 2020 14:40:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "Revisa la sección correspondiente";
}
}, 1000);
</script>
</html>
Si esto se ve desde una pantalla grande, se visualiza bien, el problema ocurre en pantallas pequeñas/minimizadas.
Quisiera saber si se puede ajustar el .caption
(junto con el #demo
) a la imagen según las dimensiones de la pantalla.
La imagen se redimensiona bien, pero el texto no.
Nota: No podré probarlo hasta el lunes, por si no respondo lo que funciona o no el fin de semana. Gracias por su atención.