Hola.
Estoy intentando hacer una web y tengo el siguiente problema:
Tengo esta distribucion a pantalla completa:
La cuestión es que cuando redimensiono en horizontal (la verdad es que en vertical la proporción se mantiene bastante bien) ocurre lo siguiente:
Teniendo en cuenta que todo está contenido en el div rosa y en el CSS todo son proporciones, no entiendo porque las imágenes acaban sobresaliendo del mencionado div rosa. Tengo un jquery llamado textFit que hace que el texto se vaya adaptando a la pantalla, pero parece funcionar más teniendo en cuenta el ancho que el alto, pues hacer más pequeño el navegador en horizontal el tamaño del texto no cambia... ¿Cómo puede hacerse responsive el texto en vertical, teniendo en cuenta que las queries suelen medirse en ancho y no en largo?
¿Alguna solución? Pego el código por si sirve de ayuda:
Código HTML:
<section id="servicios">
<h2 class="titulo">SERVICIOS</h2>
<p class="descripcion" id="textoServicios"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias obcaecati odio libero impedit ut sunt iusto ipsum earum asperiores, veritatis beatae quod! Laborum delectus assumenda dolor, dolore ipsa maiores ad.</span>
<div class="serviciosImagenes">
<img src="img/cajaroja.png" class="serviciosImagen" id="cajaroja">
<img src="img/cajaroja.png" class="serviciosImagen" id="cajaroja">
<img src="img/cajaroja.png" class="serviciosImagen" id="cajaroja">
</div>
<div class="serviciosTextos">
<h4>SERVICIO</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus ab, dolor quos aperiam atque! Ad possimus consequuntur, dolor inventore! Blanditiis incidunt excepturi magnam minus illum quos, voluptate, commodi porro voluptatibus.</p>
<h4>SERVICIO</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus ab, dolor quos aperiam atque! Ad possimus consequuntur, dolor inventore! Blanditiis incidunt excepturi magnam minus illum quos, voluptate, commodi porro voluptatibus.</p>
<h4>SERVICIO</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus ab, dolor quos aperiam atque! Ad possimus consequuntur, dolor inventore! Blanditiis incidunt excepturi magnam minus illum quos, voluptate, commodi porro voluptatibus.</p>
</div>
<div class="serviciosImagenes2">
<img src="img/cajaroja.png" class="serviciosImagen" id="cajaroja">
<img src="img/cajaroja.png" class="serviciosImagen" id="cajaroja">
<img src="img/cajaroja.png" class="serviciosImagen" id="cajaroja">
</div>
<div class="serviciosTextos2">
<h4>SERVICIO</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus ab, dolor quos aperiam atque! Ad possimus consequuntur, dolor inventore! Blanditiis incidunt excepturi magnam minus illum quos, voluptate, commodi porro voluptatibus.</p>
<h4>SERVICIO</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus ab, dolor quos aperiam atque! Ad possimus consequuntur, dolor inventore! Blanditiis incidunt excepturi magnam minus illum quos, voluptate, commodi porro voluptatibus.</p>
<h4>SERVICIO</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus ab, dolor quos aperiam atque! Ad possimus consequuntur, dolor inventore! Blanditiis incidunt excepturi magnam minus illum quos, voluptate, commodi porro voluptatibus.</p>
</div>
</section>
Código:
/*SERVICIOS*/
#servicios {
background-color: pink;
width:100%;
height:100%;
}
.serviciosImagenes {
width:61.7%;
height:30%;
clear:none;
display:inline-block;
float:left;
}
.serviciosImagenes2 {
width:61.7%;
height:30%;
float:right;
margin-top: 3%;
}
.serviciosImagen {
background: url(../img/cajaroja.png);
max-width: 100%;
max-height: 100%;
width: 25%;
height: 100%;
float:left;
margin-left: 6%;
}
.serviciosTextos {
float:left;
width:30%;
height:30%;
}
.serviciosTextos2 {
float:left;
width:30%;
height:30%;
margin-left: 4%;
margin-top: 2%;
}
Gracias y un saludo.