Sí, es posible lograr que el tamaño del texto sea diferente en el ordenador y en el móvil utilizando código CSS específico para dispositivos móviles. Para hacerlo, necesitarás agregar reglas de estilo que se apliquen solo cuando el sitio web se vea en dispositivos móviles.
Aquí te muestro cómo hacerlo utilizando CSS y la regla @media para aplicar estilos específicos para dispositivos móviles:
- Abre el archivo
style.css de tu tema de WordPress o usa un plugin como «Simple Custom CSS» para agregar estilos personalizados.
- Agrega el siguiente código al final del archivo
style.css:
/* Estilos para el texto en dispositivos de escritorio */
p {
font-size: 48px;
}
/* Estilos para el texto en dispositivos móviles */
@media only screen and (max-width: 767px) {
p {
font-size: 20px;
}
}
En el código anterior, hemos definido un tamaño de fuente de 48 píxeles para los elementos <p> en dispositivos de escritorio (ancho de pantalla mayor que 767px) y un tamaño de fuente de 20 píxeles para dispositivos móviles (ancho de pantalla menor o igual a 767px).
Esto asegurará que el texto se vea a 48px en la versión de escritorio y a 20px en la versión móvil de tu sitio web de WordPress.
Guarda los cambios en el archivo style.css y verifica cómo se ve el texto en diferentes dispositivos. Es importante mencionar que los tamaños exactos y los puntos de corte en el @media query pueden variar según el diseño específico de tu sitio web, por lo que puedes ajustarlos según tus necesidades.
Me he descargado el plugin simple CSS y JS pero no sé usarlo… soy un desastre, no es mi dia. Voy a probar esta noche.
Buenas.
He metido el css tal como me lo has puesto en preferencias- CSS y me cambia todo el texto de toda la página pero no sé por qué motivo no me cambia el texto del título y de algún párrafo que he metido sobre la foto principal. Es raro, no? En el móvil tampoco. Es como si no hiciera efecto sobre la imagen. Gracias!
también lo que me pasa es que texto de esa foto en el móvil es como si no tuviera espacio, está pegado al borde…
-
Esta respuesta fue modificada hace 1 año, 4 meses por
nitarocker.
Si el CSS que agregaste no está afectando ciertos elementos de tu sitio web, como el texto del título y algunos párrafos sobre la foto principal, y además estás experimentando problemas de espaciado en dispositivos móviles, es posible que haya algunas razones para esto. Aquí hay algunas cosas que podrías revisar y considerar:
- Especificidad del CSS: Asegúrate de que no haya otras reglas CSS en tu sitio que estén aplicando estilos al texto del título y a los párrafos sobre la foto. Las reglas CSS con mayor especificidad tendrán prioridad. Puedes utilizar herramientas de desarrollo web (como las herramientas de inspección en los navegadores) para verificar qué reglas están afectando a esos elementos específicos y ajustar tu CSS en consecuencia.
- Selección de elementos: Asegúrate de que estás seleccionando los elementos correctos en tu CSS. Por ejemplo, si los títulos están envueltos en una etiqueta
<h1>, <h2>, etc., deberías apuntar a esas etiquetas específicas en lugar de solo usar p para párrafos.
- Rutas de archivo incorrectas: Si estás utilizando una imagen de fondo para la foto principal y no se ve afectada por el CSS, verifica que la ruta del archivo de imagen en tu código CSS sea correcta.
- Espaciado en dispositivos móviles: Para solucionar el problema de espaciado en dispositivos móviles, puedes utilizar propiedades CSS como
padding o margin para ajustar el espacio alrededor del texto y asegurarte de que no esté pegado al borde.
- Cache del navegador: Asegúrate de borrar la caché de tu navegador o cargar la página en modo incógnito para asegurarte de que estás viendo los cambios más recientes de tu CSS.
Si aún tienes problemas después de revisar estos puntos, podría ser útil proporcionar más detalles sobre el código HTML y CSS relacionado con los elementos que no se están viendo afectados correctamente, para que pueda brindarte una asistencia más específica.
Gracias!
Lo unico que tengo en CSS es esto:
.main-header-bar.ast-sticky-active {
box-shadow: unset;
}
/* Estilos para el texto en dispositivos de escritorio */
p {
font-size: 14px;
}
/* Estilos para el texto en dispositivos móviles */
@media only screen and (max-width: 767px) {
p {
font-size: 12px;
}
}
- No tengo ni idea como mirar eso…
- Como apunto solamente a esas etiquetas?
- la ruta es correcta pero me gustaria cambiar la foto sobre elmovil unicamente… la posicion.
- Investigo mas, no sabria hacerlo. Tienes algun ejemplo?
- Si, lo hago a menudo
Muchisimas gracias!
Esto es el HTML del titulo que es un paragraphe que queria que en el movil se vea mas pequeño y que tengo algo de espacio en los bordes en el movil:
<p style="margin-top:11px;margin-right:11px;margin-bottom:11px;margin-left:11px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;font-size:45px">HELI BLUE</p>
Buenas. Has podido ver algo?
