Introducción

En muchos temas de WordPress el espaciado entre párrafos está pensado para pantallas de escritorio y puede quedar demasiado compacto en dispositivos móviles. Este artículo explica, paso a paso y con ejemplos listos para usar, cómo añadir o ajustar la separación entre párrafos en móvil usando media queries. También veremos cómo aplicar los cambios de forma segura en WordPress (Custom CSS, child theme, o plugin), cómo seleccionar los selectores correctos (Gutenberg, themes clásicos) y buenas prácticas de accesibilidad y rendimiento.

Por qué ajustar la separación en móvil

• Legibilidad: en pantallas pequeñas, bloques de texto demasiado juntos dificultan la lectura y la navegación visual.
• Tamaño táctil: un mayor espacio mejora la interacción y evita toques accidentales en enlaces o botones cercanos al texto.
• Consistencia visual: algunos temas aplican estilos globales que no son óptimos para móviles un ajuste puntual mejora la experiencia sin tocar el diseño de escritorio.

Conceptos clave

1. Media query: regla CSS que se aplica solo cuando se cumple una condición (ej. max-width: 767px).
2. Margen vs. padding vs. line-height: para separar párrafos lo más habitual es usar margin-bottom en el elemento ltpgt. line-height controla el interlineado dentro del párrafo. Evita usar padding en los párrafos para separación entre párrafos.
3. Especificidad: si el tema usa selectores con mayor especificidad, puede que tengas que aumentar la especificidad o, en casos concretos, usar !important (con moderación).
4. Selectores correctos: .entry-content p, .post-content p, .wp-block-paragraph, .widget_text p, etc.

Breakpoints recomendados

No existe un breakpoint único para todos los sitios. Aquí tienes valores comunes y cuándo usarlos:

Breakpoint	Uso
max-width: 480px	móviles pequeños (iPhone SE, etc.)
max-width: 600px	móviles estándar
max-width: 768px	tablets en orientación vertical y muchos móviles grandes

Ejemplos prácticos de CSS

A continuación tienes varios ejemplos listos para insertar en Appearance → Customizer → Additional CSS o en tu archivo style.css de un child theme. Recuerda elegir el breakpoint que mejor funcione con tu tema.

1) Ejemplo mínimo: separar párrafos en móviles (max-width:600px)

@media (max-width: 600px) {
  .entry-content p,
  .post-content p,
  .page-content p {
    margin-bottom: 1.1rem
  }
}

Explicación: usa rem para que el espaciado sea relativo al tamaño de fuente base. 1.1rem es un valor equilibrado ajústalo según tu tipografía.

2) Dirigido a bloques de Gutenberg (wp-block-paragraph)

@media (max-width: 768px) {
  .wp-block-paragraph {
    margin-bottom: 1.2rem
  }

  / Si usas bloques dentro de .entry-content para mayor especificidad /
  .entry-content .wp-block-paragraph {
    margin-bottom: 1.25rem
  }
}

3) Ajuste más agresivo cuando el tema sobreescribe estilos

@media (max-width: 600px) {
  .entry-content p,
  .entry-content .wp-block-paragraph,
  .post-content p {
    margin-bottom: 1.3rem !important
  }
}

Nota: usar !important puede resolver conflictos de especificidad, pero es mejor aumentar la especificidad del selector si es posible.

4) Espaciado diferente para encabezados y párrafos

@media (max-width: 600px) {
  .entry-content h2   p,
  .entry-content h3   p {
    margin-top: 0.6rem
    margin-bottom: 1rem
  }

  .entry-content p   p {
    margin-top: 0 / normalizar si el tema añade margin-top /
    margin-bottom: 1.1rem
  }
}

5) Encolando un archivo CSS en un child theme (functions.php)

Si prefieres mantener CSS separado, crea un archivo mobile-paragraphs.css en tu child theme y encola el estilo solo cuando sea necesario:

function mi_childtheme_enqueue_mobile_css() {
  wp_enqueue_style(
    mi-mobile-paragraphs,
    get_stylesheet_directory_uri() . /css/mobile-paragraphs.css,
    array(),
    1.0
  )
}
add_action(wp_enqueue_scripts, mi_childtheme_enqueue_mobile_css)

Dónde colocar el CSS en WordPress

• Customizer → Additional CSS: rápido y seguro, visible inmediatamente.
• Child theme style.css: para cambios controlados por versión y fáciles de migrar.
• Plugin de CSS personalizado (Simple Custom CSS, etc.): útil si no quieres un child theme.
• Encolar un archivo CSS: mejor para organizar estilos complejos o cuando quieres cargar condicionalmente.

Detectar selectores exactos: método práctico

1. Abre una entrada en el navegador móvil o usa las herramientas de desarrollo (inspector en modo responsive).
2. Selecciona el párrafo y observa sus selectores (p, .entry-content p, .post .content p, .wp-block-paragraph, etc.).
3. Aplica una regla en el inspector para comprobar cómo afecta y anota el selector que funciona mejor.

Pruebas, caché y minificación

• Desactiva temporalmente plugins de cache o minificación para ver los cambios en tiempo real mientras pruebas.
• Una vez verificado, limpia cache y verifica en diferentes dispositivos y navegadores.

Accesibilidad y buenas prácticas

• No uses valores excesivos que creen enormes espacios en móviles 0.9rem–1.4rem suele ser suficiente.
• Mantén contraste y tamaño de fuente adecuados y recuerda que mayor espacio puede ayudar a usuarios con baja visión.
• Evita cambiar la estructura HTML solo con CSS procura que la semántica (p, h2, h3) permanezca correcta.

Casos especiales y soluciones avanzadas

• Párrafos dentro de widgets: añade selectores como .widget p o .widget_text p.
• Entradas con shortcodes o plugins que envuelven el contenido: inspecciona y añade reglas para esas clases específicas.
• Si el tema usa inline styles generados dinámicamente: puede que necesites mayor especificidad o usar una regla con !important.

Lista de comprobación rápida antes de publicar

1. Hecho una copia de seguridad o trabajo en un child theme.
2. Probado la media query en varios tamaños reales (iPhone, Android, tabletas).
3. Verificado que no rompe diseño en escritorio.
4. Limpiado cache y probado en modo incógnito si es necesario.

Conclusión

Añadir separación entre párrafos en móvil con media queries es una mejora sencilla que aumenta considerablemente la legibilidad y la experiencia de usuario. Usa selectores precisos (como .entry-content p o .wp-block-paragraph), establece breakpoints adecuados y prueba en dispositivos reales. Guarda los cambios en el Customizer o en tu child theme para que sean persistentes y fáciles de mantener.

Ejemplo final combinado (lista lista para pegar)

/ Espaciado de párrafos móvil: pega en Appearance → Additional CSS o en tu child theme /
@media (max-width: 768px) {
  / Regla general para entradas y páginas /
  .entry-content p,
  .post-content p,
  .page-content p,
  .wp-block-paragraph {
    margin-bottom: 1.15rem
  }

  / Asegura espaciado correcto después de encabezados /
  .entry-content h2   p,
  .entry-content h3   p {
    margin-top: 0.5rem
    margin-bottom: 1rem
  }
}