[SOLUCIONADO] Problema tamaño letra CSS movil

[ivanin87]

Buenos días,

llevo un buen rato atascado con un problema: Tengo una web maquetada perfectamente para web. Todas las medidas están en % salvo el div que contiene todo que cambia su tamaño según resolución de pantalla... El caso es que al verlo desde un móvil me da unos problemas incomprensibles, como que los tamaños de letra no son ni siquiera similares, pongo un ejemplo:

Tengo 4 estructuras iguales, un div que contiene un h3 de título y varios p o divs con contenido, se van mostrando cada div según en que sección esté mediante jquery, el caso es que el movil me muestra según en que sección el h3 en un tamaño diferente, al igual que los p...

Tengo media querys que regulan algunas imágenes según desde donde se navegue, pero ni metiendo ahí las etiquetas de texto me lo arregla. He probado por px por si acaso y tampoco... El caso es que el % puede variar según en cuantos niveles estuviera el h3, pero están todos iguales:

<div>
<h3>titulo</h3>
Contenidos...
</div>

No es más que eso la estructura...

A ver si a alguien se le ocurre alguna idea o porque podría ser...

[CybMeta]

Habría que ver más HTML y el CSS. No se otros pero yo, con la información dada, soy incapaz de decirte dónde tienes el problema.

[Zeromm]

hay que ver la web, pasa el link para revisarla

[alzacon]

Yo tampoco me entero muy bien de lo que pasa o deja de pasar. Estaría bien que intentases simplificar la explicación del problema y con ello lo referente al codigo que muestres. A mi al menos no me aporta nada que me digas que usas jquery para tal o cual.

Siempre es mejor tratar de poner un ejemplo lo más básico posible con el problema, sólo html y css. Al tratar de simplificar el escenario puedes dar con el problema y puede que también con la solución.

[_Ju]

Intenta darle un height al contenedor del texto.

[ivanin87]

La web es ivric.es, desde el pc todo ok, pero los títulos de las secciones desde el móvil veréis que varían, al igual que el tamaño de letra, siendo los contenedores todos iguales y por porcentajes, ya que quiero dejarla ok en todos los dispositivos...

Gracias a todos por las contestaciones...

[Zeromm]

sin ver aún la web me intriga una cosa... ¿porque metes absolutamente todo en %?

[alzacon]

Donde se ve mas chico es en portafolio, los demás se ven igual (o eso creo) al menos en tablet.

[ivanin87]

Iniciado por Zeromm

sin ver aún la web me intriga una cosa... ¿porque metes absolutamente todo en %?

El contenedor todo él tiene un ancho, el resto va en % sobre ese ancho, lo que consigue que cambiando con media querys ese ancho se adapte a más resoluciones sin tocar nada más...

Iniciado por alzacon

Donde se ve mas chico es en portafolio, los demás se ven igual (o eso creo) al menos en tablet.

Exacto, es en esa sección, es incomprensible...

[alzacon]

Creo que lo que vas a tener que hacer es simplificar tu problema, mostrando al menos dos cuadros (uno bueno y el malo) e ir purgando tanto css como html, para que se pueda ver el problema mejor.

A mi por ejemplo me cuesta entender el sentido de tu html y css, por ejemplo ver esto y no saber el porqué de las dos media querys

Código CSS:

@media (min-height: 200px) and (max-height: 800px) {
    .maestro{width: 560px;height: 560px; }
}
@media (min-height: 0px) and (max-height: 200px) {
    .maestro{width: 560px;height: 560px; }
 

Las mismas dimensiones para .maestro para mestro si tiene una altura menor o igual de 200 o si tiene desde 200 hasta 800 de altura. Como para ponerse a mirarlo detenidamente.

[ivanin87]

Iniciado por alzacon

Creo que lo que vas a tener que hacer es simplificar tu problema, mostrando al menos dos cuadros (uno bueno y el malo) e ir purgando tanto css como html, para que se pueda ver el problema mejor.

A mi por ejemplo me cuesta entender el sentido de tu html y css, por ejemplo ver esto y no saber el porqué de las dos media querys

Código CSS:

@media (min-height: 200px) and (max-height: 800px) {
    .maestro{width: 560px;height: 560px; }
}
@media (min-height: 0px) and (max-height: 200px) {
    .maestro{width: 560px;height: 560px; }
 

Las mismas dimensiones para .maestro para mestro si tiene una altura menor o igual de 200 o si tiene desde 200 hasta 800 de altura. Como para ponerse a mirarlo detenidamente.

Eso fue una prueba que no corregí, lo cambio ahora mismo...

Lo que he descubierto es algo totalmente novedoso, si el móvil esta apaisado se ve correcto, todos los h3 iguales y como debe verse, es al ponerlo en vertical cuando se ve mal...