0

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.

1
  • Lo estoy viendo en distintas pantallas y no se desborda nunca. Podrías adjuntar una imagen con el desborde que ves tú? el 7 feb. 2020 a las 14:03

1 respuesta 1

2

Lo único que tendrías que hacer es añadir a .caption un max-height: 100% para evitar que exceda el tamaño de su padre.

.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;
  max-height: 100%;
}

#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>

Tu Respuesta

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

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