mi pregunta parece algo simple en verdad y tal vez lo es... pero ya he buscado en muchos sitios y no tengo muy claro como puedo hacer esto. Explico: tengo un div en bootstrap en relative en el cual tengo una imagen, y un texto en posicion absolute (esta en absolute porque quiero que el texto este encima de mi imagen y escale segun el div), mi pregunta es como puedo hacer que el texto escale de manera continua en tdas las pantallas responsive esto es lo que pasa: -ESTO ES EN UNA PANTALLA NORMALDE PC
Como pueden ver el text se mueve y no calza con la imagen del contenedor, mis soluciones fueron 1, comenzar a trabajar con media query para darle un top y un left a cada texto con absolute, pero es muy trabajoso, y en algunos casos tengo no solo 1 texto sino hasta 5 o mas los cuales tengo que mover en cada dispositivo movil y no es para nada optimo. algo como esto para cada pantalla:
@media (max-width: 1024px)
.carnivoro{
left: 29% !important;
}
, como ven estoy trabajando con % y tambien he intentado trabajar con vw y vh pero no sirvió, quisiera saber si alguien tiene una solución mas optima para este problema ya sea con css y html o usando javascript me sería de mucha ayuda, bueno gracias de antemano. este es el codigo de mi contenedor y sus estilos:
HTML
<div class="container-fluid imgcont3">
<div class="row">
<div class="col-sm-12 contImgGen">
<p class="carnivoro animal1">Carnívoros</p>
<img src="img/1.1.png" alt="" class="img-fluid img1View imgView1-1">
</div>
</div>
</div>
CSS
.contImgGen
{
position: relative;
}
.carnivoro
{
position: absolute;
top: 3%;
left: 29%;
}