Hola a todos, veréis, estoy haciendo una web y tengo un problema en el último paso final. En la portada he añadido un trozo de texto y le he metido una propiedad de margin-left. Este es el código:
.portada { width:80%; margin-left:80px; background-image: url("/wp-content/imagenes/prueba.png"); background-repeat: no-repeat; background-position: center; }
En la versión escritorio se ve perfecto, el problema me llega a la hora de verlo en el móvil. Debido a la propiedad margin el texto se me ve movido a la derecha (lógico) por lo que he jugado con las propiedades media query, añadiéndole esto:
@media screen and (max-width: 600px) { .portada { width: 100%; margin-left: 0px; } }
Y ahí perfecto, se me arregló sin problema el tema. El fallo es que en mi web tengo fuentes personalizadas añadidas con la propiedad font-face. Y cuando añado esta media query, todas las fuentes (que son 2) desaparecen de toda la web, no sólo ya en la portada, sino en el resto de la página. Parece que es un problema de incompatibilidad pero no veo el motivo.
¿Me podéis echar una mano? La web es esta: http://www.erreabogados.com
Muchas gracias de antemano.
Respuestas
Me parece imposible que al incluir esos estilos "responsive" las fuentes dejen de funcionar. No veo ninguna relación para que esto pueda pasar. Además, las fuentes que utilizas las estás cargando desde Google Fonts, por lo que no es posible que algún error en tu CSS haya roto la definición de las fuentes.
¿Es posible que haya algún problema puntual de conexión que haga que las fuentes no se descarguen bien desde Google?
@javiereguiluz
A mi también me parece increíble, por eso no lo entiendo. No veo ninguna relación. Las fonts eso si no son de Google Font, son personales subidas al servidor y linkeadas a través de la propiedad font-face. Y si tiene que haber alguna relación, porque es quitar el media query y volver a funcionar las fuentes. Si lo pongo de nuevo se dejan de ver.
Es muy raro.
@dostiroslibres
Decía lo de Google Fonts porque en la página que has puesto veía que se descarga la tipografía Roboto desde Google. Si estás usando @font-face manuales, entonces sí que los nuevos estilos pueden "romper" las tipografías si hay algún error de sintaxis que has cometido sin querer.
Lo más fácil sería que pegues el código CSS entero de tu página en el validador de CSS del W3C para ver si hay algún error que ha pasado desapercibido.
@javiereguiluz
Nada, sólo hay 2 errores en todo el CSS que no tienen nada que ver con nada de esto y ya están arreglados. Estoy en blanco.
@dostiroslibres