Introducción
En este tutorial aprenderás, paso a paso y con todo lujo de detalles, cómo hacer que los botones de tu sitio WordPress ocupen el 100% del ancho en dispositivos móviles usando media queries. Verás por qué funciona, cómo elegir puntos de quiebre (breakpoints), ejemplos concretos para temas, Gutenberg, WooCommerce, Elementor y formularios, y cómo aplicar los cambios de forma segura (Administrador > Personalizar, child theme o enqueue).
Por qué usar media queries y no un cambio global
- Responsividad controlada: un botón a 100% en móvil mejora la usabilidad y el target táctil en escritorio no siempre interesa por cuestiones de diseño.
- Compatibilidad: con media queries puedes apuntar sólo a pantallas pequeñas y evitar romper el layout en pantallas grandes.
- Especifidad: puedes aplicar reglas distintas a clases concretas de plugins o bloques sin tocar el markup PHP.
Decidir el breakpoint (punto de quiebre)
No existe un único valor correcto, pero estos son los más habituales:
- max-width: 480px — teléfonos pequeños.
- max-width: 767px — teléfonos y algunos phablets (común en frameworks CSS).
- max-width: 991px — tabletas en posición vertical y móviles grandes.
Como regla práctica para WordPress suele bastar usar max-width: 767px o max-width: 768px si quieres incluir tablets verticales. A continuación usaremos 767px en los ejemplos, pero adáptalo si tu tema usa otros breakpoints.
Regla CSS general para convertir botones en 100% ancho
La idea general es forzar los elementos botón/anchor a ser elementos de bloque y tomar el 100% del ancho disponible. También es conveniente controlar el max-width y asegurar un tamaño táctil razonable.
@media (max-width: 767px) {
/ Selectores comunes para botones en WordPress /
.button,
.btn,
button,
input[type=button],
input[type=submit],
a.button,
.wp-block-button__link {
display: block !important
width: 100% !important
max-width: 100% !important
box-sizing: border-box
text-align: center
padding-left: 1rem
padding-right: 1rem
margin-left: 0 !important
margin-right: 0 !important
}
/ Si tu tema aplica inline-block o float a los contenedores /
.wp-block-button {
width: 100%
}
}
Explicación de las propiedades usadas
- display: block convierte el elemento en bloque y le permite tomar todo el ancho.
- width: 100% asegura ocupación total del contenedor padre.
- box-sizing: border-box hace que padding y border se incluyan en el ancho, evitando overflow.
- !important sólo cuando el tema o plugin aplica reglas muy específicas que hay que sobreescribir.
- padding y text-align: mantienen el aspecto y centran el texto si antes el botón tenía padding interno o background.
Ejemplos específicos para casos comunes
1) Gutenberg (Bloques de botón)
Los botones de Gutenberg suelen usar .wp-block-button y .wp-block-button__link. Forzar el bloque padre y el enlace a 100% garantiza que el botón ocupe todo el ancho.
@media (max-width: 767px) {
.wp-block-button,
.wp-block-button .wp-block-button__link {
display: block !important
width: 100% !important
}
}
2) WooCommerce (botón añadir al carrito)
Los selectores más comunes para los botones de producto son .single_add_to_cart_button o formularios de compra. Aquí un ejemplo que cubre los casos típicos:
@media (max-width: 767px) {
.single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button {
display: block !important
width: 100% !important
max-width: 100% !important
}
}
3) Formularios (Contact Form 7, Gravity Forms, etc.)
Los formularios usan input[type=submit] o clases propias. Es buena idea apuntar a ambos.
@media (max-width: 767px) {
form input[type=submit],
form button[type=submit],
.wpcf7-form input[type=submit],
.gform_wrapper .gform_footer input[type=button],
.gform_wrapper .gform_footer input[type=submit] {
display: block !important
width: 100% !important
}
}
4) Elementor y otros page builders
Elementor aplica clases propias (.elementor-button, .elementor-widget-button .elementor-button) en un contenedor. Ejemplo:
@media (max-width: 767px) {
.elementor-widget-button .elementor-button,
.elementor-button {
display: block !important
width: 100% !important
}
}
Aplicar el CSS en WordPress (lugares recomendados)
- Personalizar > CSS adicional (Customizer): rápido y seguro se respeta con actualizaciones del tema.
- Child theme – style.css: si usas un child theme, añade el CSS allí para mantenerlo controlado por versión.
- Enqueue mediante functions.php: útil si quieres añadir CSS condicional o consolidar en archivos. Ejemplo de cómo añadir CSS inline o un archivo propio:
// En functions.php del child theme
function mi_tema_enqueue_responsive_css() {
wp_enqueue_style(mi-child-style, get_stylesheet_uri()) // si ya tienes style.css cargado
custom_css = @media (max-width: 767px) { .button, .btn, .wp-block-button__link { display:block!important width:100%!important } }
wp_add_inline_style(mi-child-style, custom_css)
}
add_action(wp_enqueue_scripts, mi_tema_enqueue_responsive_css, 20)
Problemas comunes y cómo resolverlos
- Las reglas no se aplican: comprueba la especificidad. Usa selectores más concretos si el tema tiene reglas muy específicas, o coloca el CSS en un archivo que se cargue después del CSS del tema.
- Cache y minificación: limpia la cache del plugin (WP Super Cache, W3 Total Cache, WP Rocket) y la cache del navegador.
- Botones dentro de columnas con padding: si el contenedor tiene padding, el botón 100% puede parecer algo más estrecho usa box-sizing: border-box o ajusta padding del contenedor.
- Iconos o pseudo-elementos: si usas iconos a la izquierda, asegúrate de que no rompan el flujo al usar display:block el icono suele colocarse a la izquierda pero no fuera del botón.
Consejos de usabilidad y accesibilidad
- Asegura un tamaño táctil mínimo recomendado: al menos 44×44 px por objetivo táctil. Controla padding y line-height.
- Contraste de color: revisa que el texto del botón mantenga contraste suficiente según WCAG.
- Espaciado: deja margen vertical entre botones para evitar pulsaciones accidentales (por ejemplo margin-top/margin-bottom de 0.5rem).
Pruebas finales
- Prueba en modo responsive del inspector del navegador (Chrome/Firefox) y en varios tamaños: 375×667, 360×800, 768×1024.
- Prueba en dispositivos reales cuando sea posible (Android, iPhone).
- Verifica en páginas con caché o CDN (Cloudflare) y purga si es necesario.
Resumen práctico
Para conseguir que los botones ocupen 100% en móviles:
- Usa una media query adecuada, típicamente @media (max-width: 767px).
- Aplica display:block y width:100% (con box-sizing: border-box).
- Aplica selectores que cubran botones, inputs submit y enlaces de botones de plugins/bloques.
- Coloca el CSS en Customizer > CSS adicional o en un child theme, y limpia la cache.
Ejemplo final consolidado (lista de selectores comunes)
@media (max-width: 767px) {
/ Selectores consolidados para la mayoría de casos /
.button,
.btn,
button,
input[type=button],
input[type=submit],
a.button,
.wp-block-button__link,
.elementor-widget-button .elementor-button,
.single_add_to_cart_button,
.wpcf7-form input[type=submit] {
display: block !important
width: 100% !important
max-width: 100% !important
box-sizing: border-box
text-align: center
padding-left: 1rem
padding-right: 1rem
margin-left: 0 !important
margin-right: 0 !important
}
/ Ajuste en contenedores de bloques si es necesario /
.wp-block-button,
.elementor-widget-button {
width: 100%
}
}
Con estas indicaciones y ejemplos podrás adaptar los estilos de tu tema y plugins para que los botones ofrezcan una mejor experiencia en dispositivos móviles sin romper el diseño en pantallas grandes.
Leave a Reply