¿Cómo corregir problemas de visualización en diferentes dispositivos en mi sitio web?

Ruiz86 Seguir

Zeta
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
18 Dic 2012
Mensajes
1.524
Edad
38
Mirar la web que le estoy terminando a un cliente: English Centre Emily |
Fijaros en:
WELCOME TO ENGLISH CENTRE -> font: Eras Bold ITC
By Emily -> font: Edwardian Script ITC

En el explorador de windows si se me muestra correctamente pero desde el móvil no y según me ha dicho el cliente desde otros dispositivos y exploradores tampoco.

He establecido todos los medias ya por desesperación xD:
HTML:
   [MENTION=16931]medi[/MENTION]a only(min-device-width: 600px){
p#tagline { font-size: 19px; }
h1#page-title { font-family: 'Eras Bold ITC'; text-align:center; font-size:30px; text-transform: uppercase; color:#65827d; }
h4#page-title2 { font-family: 'Edwardian Script ITC'; text-align:center; font-size:20px; color:#65827d; }
}

/* Smartphones (portrait and landscape) ----------- */
    [MENTION=16931]medi[/MENTION]a only (min-device-width : 320px) and (max-device-width : 480px) {
p#tagline { font-size: 16px; }
h1#page-title { font-family: 'Eras Bold ITC'; text-align:center; font-size:30px; text-transform: uppercase; color:#65827d; }
h4#page-title2 { font-family: 'Edwardian Script ITC'; text-align:center; font-size:20px; color:#65827d; }
}
 
/* Smartphones (landscape) ----------- */
    [MENTION=16931]medi[/MENTION]a only (min-width : 321px) {
p#tagline { font-size: 16px; }
h1#page-title { font-family: 'Eras Bold ITC'; text-align:center; font-size:30px; text-transform: uppercase; color:#65827d; }
h4#page-title2 { font-family: 'Edwardian Script ITC'; text-align:center; font-size:20px; color:#65827d; }
}
 
/* Smartphones (portrait) ----------- */
    [MENTION=16931]medi[/MENTION]a only (max-width : 320px) {
p#tagline { font-size: 16px; }
h1#page-title { font-family: 'Eras Bold ITC'; text-align:center; font-size:30px; text-transform: uppercase; color:#65827d; }
h4#page-title2 { font-family: 'Edwardian Script ITC'; text-align:center; font-size:20px; color:#65827d; }
}
 
/* iPads (portrait and landscape) ----------- */
    [MENTION=16931]medi[/MENTION]a only (min-device-width : 768px) and (max-device-width : 1024px) {
p#tagline { font-size: 22px; }
h1#page-title { font-family: 'Eras Bold ITC'; text-align:center; font-size:30px; text-transform: uppercase; color:#65827d; }
h4#page-title2 { font-family: 'Edwardian Script ITC'; text-align:center; font-size:20px; color:#65827d; }
}
 
/* iPads (landscape) ----------- */
    [MENTION=16931]medi[/MENTION]a only (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
p#tagline { font-size: 19px; }
h1#page-title { font-family: 'Eras Bold ITC'; text-align:center; font-size:30px; text-transform: uppercase; color:#65827d; }
h4#page-title2 { font-family: 'Edwardian Script ITC'; text-align:center; font-size:20px; color:#65827d; }
}
 
/* iPads (portrait) ----------- */
    [MENTION=16931]medi[/MENTION]a only (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
p#tagline { font-size: 19px; }
h1#page-title { font-family: 'Eras Bold ITC'; text-align:center; font-size:30px; text-transform: uppercase; color:#65827d; }
h4#page-title2 { font-family: 'Edwardian Script ITC'; text-align:center; font-size:20px; color:#65827d; }
}
 
/* Desktops and laptops ----------- */
    [MENTION=16931]medi[/MENTION]a only (min-width : 1224px) {
	p#tagline { font-size: 19px; }
h1#page-title { font-family: 'Eras Bold ITC'; text-align:center; font-size:30px; text-transform: uppercase; color:#65827d; }
h4#page-title2 { font-family: 'Edwardian Script ITC'; text-align:center; font-size:20px; color:#65827d; }
}
 
/* Large screens ----------- */
    [MENTION=16931]medi[/MENTION]a only screen and (min-width : 1824px) {
	p#tagline { font-size: 19px; }
h1#page-title { font-family: 'Eras Bold ITC'; text-align:center; font-size:30px; text-transform: uppercase; color:#65827d; }
h4#page-title2 { font-family: 'Edwardian Script ITC'; text-align:center; font-size:20px; color:#65827d; }
}
 
/* iPhone 4 ----------- */
    [MENTION=16931]medi[/MENTION]a only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
p#tagline { font-size: 17px; }
h1#page-title { font-family: 'Eras Bold ITC'; text-align:center; font-size:30px; text-transform: uppercase; color:#65827d; }
h4#page-title2 { font-family: 'Edwardian Script ITC'; text-align:center; font-size:20px; color:#65827d; }
}

¿Que me aconsejan para solucionarlo? Gracias.

PD: lo que pone de [MENTION=16931]medi[/MENTION] es @ media only que no se porque me lo cambia el foro al postearlo.
 
Última edición:

Ruiz86

Zeta
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
18 Dic 2012
Mensajes
1.524
Edad
38
Me podrías indicar como formarlo correctamente?

---------- Post agregado el 26-mar-2014 hora: 23:04 ----------

Amigos algo de ayuda..
 

96levels

Beta
Programador
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
4 Nov 2013
Mensajes
65
Qué es lo que no se muestra bien? Porqué en tu css solo veo que tocas la tipografia y el texto, pero nada de columnas ni wrappers ni containers.
 

Ruiz86

Zeta
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
18 Dic 2012
Mensajes
1.524
Edad
38
Lo que no muestra bien es la tipografía concretamente, lo demás no hay problema.

- En el lazo rojo debajo del título, la línea de contenido en la última palabra se sale del lazo y hace un salto de línea.
- La fuente de la letra no la coje

(Esto en dispositivos móviles)
 
Arriba