CSS en palabras simples: por qué el sitio «se rompe» en el móvil y cómo afecta a las ventas
CSS (Cascading Style Sheets) es el lenguaje del diseño del sitio: colores, fuentes, márgenes, disposición de bloques y adaptación a la pantalla del teléfono. Si el HTML define el «esqueleto» de la página y el JavaScript el comportamiento de botones y formularios, el CSS responde por cómo todo se ve en el monitor y en el bolsillo del cliente. Cuando el dueño dice «el sitio se rompe en el móvil», casi siempre culpan los estilos: ancho fijo, texto pequeño, botón «Comprar» fuera de pantalla, scroll horizontal, formulario imposible de rellenar con el pulgar. En 2026, más de la mitad de los leads en sitios comerciales vienen del móvil - un mal maquetado golpea la conversión directamente, no «lo arreglamos después».
- CSS - diseño: colores, fuentes, rejilla, adaptación a distintas pantallas
- «Se rompe» - scroll horizontal, bloques superpuestos, texto cortado, botones fuera de la zona de toque
- Por qué al dueño - el cliente móvil no espera la «versión de escritorio», se va al competidor
- Conjunto - HTML (estructura) + CSS (aspecto) + JS (interactividad); sin CSS la página es texto desnudo
- Riesgo principal - mockup bonito en Figma en desktop y carrito roto en iPhone
CSS en palabras simples
CSS es un conjunto de reglas para el navegador: «título - 24 píxeles y azul», «botón - ancho completo en el móvil», «menú lateral - ocultar en pantallas menores de 768 píxeles». No es programación en el sentido habitual - describes la apariencia, no la lógica de negocio.
| Capa | Qué hace | Analogía |
|---|---|---|
| HTML | Títulos, texto, formularios, enlaces | Estructura del edificio |
| CSS | Colores, fuentes, márgenes, rejilla, responsive | Acabados y distribución |
| JavaScript | Carrito, slider, validación de formulario | Ascensor, alarma, iluminación |
| PHP / backend | Pedidos, pago, base de datos | Instalaciones tras el muro |
Importante: el contratista puede mostrar un sitio perfecto en su portátil - y el 70% de visitantes ve otra cosa en el móvil si el CSS no está ajustado.
Por qué el sitio «se rompe» en el móvil
«Se rompe» es la forma coloquial de varios problemas de diseño responsive. Síntomas y causas CSS típicas:
Scroll horizontal
Aparece barra de desplazamiento lateral - el usuario ve el sitio «cortado». Lo más frecuente:
- bloque con ancho fijo (p. ej. 1200 px) sin
max-width: 100%; - tabla de precios o catálogo no se reordena en pantalla estrecha;
- banner o vídeo más ancho que la pantalla del teléfono.
Bloques superpuestos
El texto tapa el botón, el precio queda bajo la foto, el menú cubre el título:
- elementos con posicionamiento absoluto «como en mockup de 1920 px»;
- faltan márgenes en pantallas pequeñas;
- la fuente no se reduce y el contenedor no crece - el contenido se desborda.
Texto y botones pequeños
En el móvil no se leen las condiciones de envío ni se pulsa «Finalizar compra»:
- texto base menor de 14-16 px;
- botones menos de 44 px de alto (recomendación de zona de toque);
- enlaces del pie muy juntos - fallo y abandono.
Versión «de escritorio» en el móvil
El sitio abre pero todo es pequeño - hay que hacer zoom:
- sin viewport en HTML - el navegador «encoge» el desktop;
- subdominio m. separado sin redirecciones;
- plantilla antigua sin media queries.
Qué comprobar en 5 minutos sin código
- Abra el sitio en su propio teléfono.
- Recorra inicio - catálogo - ficha - carrito - pago.
- Gire vertical y horizontal - nada debe romperse.
- Rellene el formulario de contacto con una mano.
- Compare con un competidor del mismo sector.
Cómo el móvil roto afecta a las ventas
No es estética - son dinero y leads.
| Síntoma móvil | Comportamiento | Impacto |
|---|---|---|
| Scroll horizontal | Irritación, cierre en 3-5 s | Lead perdido, más rebotes |
| Botón «Comprar» invisible | Busca «comprar X cerca» | Venta al competidor |
| Formulario no cabe | Abandono a medias | Menos leads de ads y SEO |
| Carga lenta por CSS/fuentes pesadas | Espera 4+ s en 4G | Hasta 40% se van antes de cargar |
| Precios ilegibles | Desconfianza | Menos conversión con el mismo tráfico |
Cifras orientativas:
- 53%+ de sesiones e-commerce en algunos sectores son móviles.
- Google usa indexación mobile-first: móvil peor = peor posicionamiento y menos leads orgánicos.
- Corregir CSS crítico en checkout suele dar +10-30% pedidos completados sin más presupuesto publicitario.
Práctica: mida leads desde móvil, no solo visitas. Si desktop convierte 4% y móvil 0,8%, el problema casi seguro es maquetado, velocidad o UX.
Responsive, móvil separado y app
Diseño responsive
Un solo sitio, el CSS reordena bloques. Pros: una URL para SEO. Contras: CSS bien hecho desde el inicio.
Versión móvil separada (m.sitio.com)
Segundo conjunto de páginas. Contras: dos códigos, precios desincronizados, problemas de indexación.
PWA / «app»
Tiene sentido con compras repetidas; para landing, a menudo de más.
| Enfoque | Cuándo | Presupuesto inicial |
|---|---|---|
| CSS responsive | Sitio nuevo, WordPress | Incluido en buen maquetado |
| Parches CSS | Tráfico existe, conversión móvil baja | $500 - $3 000 |
| Rediseño completo | Marca antigua, rebote móvil > 60% | $3 000 - $15 000+ |
| App nativa | Cientos de miles MAU | Desde $15 000 |
Regla: para la mayoría de pymes en 2026 basta un sitio responsive con CSS probado en páginas clave.
Qué preguntar al contratista en la entrega
- ¿Qué páginas probaron en móvil? Lista: inicio, catálogo, ficha, carrito, pago, contacto.
- ¿Informe PageSpeed / Core Web Vitals móvil?
- ¿Una URL para todos los dispositivos?
- ¿Quién edita CSS después?
- Garantía de maquetado móvil en el acta de entrega.
Un auditoría SEO con bloque mobile usability suele detectar problemas CSS que cortan conversión.
Errores típicos del dueño
- Solo mirar desktop en la entrega.
- Exigir pixel-perfect en móvil cuando simplificar sube conversión.
- Añadir widgets sin probar en móvil.
- Ahorrar en maquetado e invertir en ads.
- Cambiar tema WordPress sin probar checkout móvil.
Resumen
CSS es cómo se ve el sitio y si funciona en el teléfono. «Se rompe» casi siempre son estilos y responsive, no virus ni hosting. En la era mobile-first, mal maquetado = pérdida directa de ventas.
Conviene:
- probar el recorrido de compra en teléfono real antes de pagar;
- comparar conversión desktop vs móvil;
- exigir CSS responsive en una URL;
- no sacrificar velocidad en 4G por efectos de moda.
Buen CSS es invisible - el cliente compra. Mal CSS: pagas ads y SEO y la mitad ve un escaparate roto.
Preguntas frecuentes
¿CSS y HTML son lo mismo?
No. HTML es estructura; CSS es diseño. Sin HTML no hay qué estilizar; sin CSS la página parece de los 90.
¿Por qué en PC va bien y en móvil se rompe?
En monitor grande cabe ancho fijo; en 390 px los mismos estilos no se adaptan. Falta de media queries, tablas anchas, viewport antiguo. Solución: pruebas móviles y CSS, no pedir al cliente «ábralo en PC».
¿Se puede arreglar el móvil sin rehacer todo?
A menudo sí - CSS puntual en inicio, catálogo y checkout. En sitios muy antiguos compare parche vs plantilla nueva.
¿Afecta al posicionamiento en Google?
Sí. Mobile-friendly, Core Web Vitals, señales de comportamiento. Yandex también valora móvil. SEO no sustituye buen maquetado.
¿Cuánto cuesta un responsive decente?
Landing $800 - $2 500; corporativo 10-15 plantillas $2 500 - $8 000; tienda custom $5 000 - $20 000+; carrito móvil en WordPress $500 - $2 000. Reserve 10-15% para pruebas en dispositivos reales.