Una sección puede verse perfectamente en una computadora y presentar problemas importantes cuando se visualiza desde una tablet o celular.

Por ejemplo:

• aparece scroll horizontal;

• una imagen sale de la pantalla;

• dos columnas quedan extremadamente estrechas;

• un Heading ocupa demasiadas líneas;

• un Button se corta;

• una Card queda fuera de lugar;

• dos elementos se superponen;

• existe un enorme espacio vacío;

• una imagen aparece antes del texto cuando debería mostrarse después;

• el contenido permanece en tres columnas cuando debería apilarse;

• un elemento desaparece;

• una Section tiene una altura excesiva;

• un mapa desborda;

• un formulario queda comprimido;

• una animación genera movimientos inesperados;

• un cambio realizado para mobile rompe desktop.

El error más frecuente es intentar corregir todo inmediatamente con CSS.

Por ejemplo:

body {
    overflow-x: hidden;
}

La página deja de mostrar el scroll horizontal.

Pero el elemento que realmente está saliendo de pantalla continúa allí.

Solo lo estamos ocultando.

Primera regla

No ocultes el síntoma. Encuentra el elemento que origina el problema.

Método profesional de diagnóstico

Vamos a utilizar esta secuencia:

1. IDENTIFICAR EL SÍNTOMA
↓
2. IDENTIFICAR EL ELEMENTO
↓
3. LOCALIZARLO EN NAVIGATOR
↓
4. REVISAR SU PADRE
↓
5. REVISAR GRID ROW
↓
6. REVISAR WIDTH / MAX WIDTH
↓
7. REVISAR MARGIN / PADDING
↓
8. REVISAR POSITION
↓
9. REVISAR HEIGHT
↓
10. REVISAR CSS PERSONALIZADO
↓
11. REVISAR LINKED STYLES
↓
12. CORREGIR EN EL NIVEL MÁS PEQUEÑO POSIBLE
↓
13. PROBAR DESKTOP
↓
14. PROBAR TABLET
↓
15. PROBAR MOBILE
↓
16. VER PÁGINA

El objetivo

Pasar de:

“en celular se rompe”

a:

“la segunda Column conserva demasiado ancho
en Small y genera el desbordamiento”

O:

“la Image tiene Width fija de 680px”

O:

“la Card tiene margin-left: 180px”

O:

“el elemento está en Position absolute”

Cuando conoces la causa:

la solución suele ser mucho más sencilla.

Antes de comenzar: entiende la diferencia entre Preview y comportamiento real

En la parte superior del Editor de bloques puedes utilizar los iconos de dispositivos para visualizar:

• celular;

• tablet;

• computadora.

Estos controles sirven para:

PREVISUALIZAR

cómo se comporta el diseño.

No significan automáticamente

OCULTAR / MOSTRAR CONTENIDO

Para modificar la visibilidad real existe:

Avanzado → Hide based on device screen width

con opciones como:

• Extra small;

• Small;

• Medium;

• Large;

• Xl;

• Xxl.

Por lo tanto

PREVIEW DE DISPOSITIVO
≠
VISIBILIDAD REAL

Segunda regla

Utiliza los controles superiores para detectar problemas. No los confundas con una configuración de visibilidad.

Paso 1. Reproduce el problema

Antes de cambiar nada:

abre la sección en la vista donde falla.

Por ejemplo:

Desktop
✅ funciona

Tablet
⚠️ título demasiado estrecho

Mobile
❌ aparece scroll horizontal

No empieces modificando

Primero observa.

Paso 2. Define exactamente el síntoma

No digas solamente:

“se ve mal”

Describe:

“la Image sobresale aproximadamente
por el lado derecho”

O:

“las tres Cards continúan en una sola fila”

O:

“existe un espacio vacío de aproximadamente
media pantalla debajo del texto”

O:

“el CTA queda detrás de la Image”

Cuanto más específico sea el síntoma,

más fácil será encontrar la causa.

Paso 3. No cambies varios elementos al mismo tiempo

Evita:

cambiar Grid
+
Width
+
Font size
+
Padding
+
CSS

todo junto.

Si el problema desaparece:

no sabrás qué lo solucionó.

Trabaja:

UNA HIPÓTESIS
→ UNA MODIFICACIÓN
→ UNA PRUEBA

Tercera regla

Diagnosticar es cambiar una variable por vez.

Paso 4. Utiliza Navigator

Abre:

Navigator

Busca la zona problemática.

Por ejemplo:

SECTION
└── CONTAINER
    └── GRID ROW
        ├── COLUMN
        │   └── TEXT
        └── COLUMN
            └── IMAGE

Si el problema parece ser la Image:

selecciona:

IMAGE

Después también revisa:

COLUMN

Y:

GRID ROW

Un elemento puede parecer culpable

pero el problema estar en su contenedor.

Ejemplo

La Image parece demasiado grande.

Pero puede tener:

Width: 100%

correctamente.

El problema real puede ser:

Column
→ width incorrecto

O:

Row
→ no permite Wrap

Cuarta regla

Cuando un elemento se rompe, revisa también su padre.

Paso 5. Utiliza Seleccionar padre

Desde la barra contextual:

Seleccionar padre

te permite subir en la jerarquía.

Por ejemplo:

Image
↓
Column
↓
Grid Row
↓
Container
↓
Section

Esto es muy útil para determinar:

¿el problema pertenece al elemento o al layout que lo contiene?

Paso 6. Revisa primero Grid Row

Cuando el problema involucra:

• columnas;

• Cards;

• texto + imagen;

• formulario;

• servicios;

• beneficios;

Grid Row es uno de los primeros lugares que debes revisar.

Selecciona:

Grid Row

En Contenido puedes encontrar controles relacionados con:

• Direction;

• Vertical align;

• Horizontal align;

• Wrap;

• Columns;

• tamaños por dispositivo.

Revisa cada Column.

Paso 7. Revisa tamaños por dispositivo

Grid Row permite configurar el tamaño de cada Column para:

• Extra small;

• Small;

• Medium;

• Large;

• Extra large;

• Extra extra large.

Por ejemplo

desktop:

6 + 6

Puede necesitar mobile:

12 + 12

Una grilla de beneficios:

desktop:

4 + 4 + 4

Tablet:

6 + 6

Mobile:

12
12
12

Si mantienes:

4 + 4 + 4

en una pantalla muy estrecha,

puedes terminar con:

[ Card ][ Card ][ Card ]

de apenas unos centímetros.

Paso 8. No reduzcas Font size para conservar demasiadas columnas

Síntoma:

Heading ocupa 5 líneas

Primera reacción incorrecta:

Font size 12px

Pregunta primero:

¿la Column es demasiado estrecha?

Quizá la solución es:

3 columnas
→ 2

en tablet.

O:

2
→ 1

en mobile.

Quinta regla

El layout debe adaptarse al contenido antes de sacrificar la legibilidad.

Paso 9. Revisa Wrap

Si una Row contiene varias Columns:

comprueba:

Wrap

Si los elementos no pueden pasar a una nueva línea,

puede producirse:

• compresión;

• overflow.

Conceptualmente:

SIN WRAP

[A][B][C][D][E]

Con poco espacio:

[A][B][C][D][E] →

Con Wrap apropiado:

[A][B]

[C][D]

[E]

según tamaños configurados.

No utilices Width manuales para sustituir una configuración de Grid correcta.

Paso 10. Revisa Direction

Una composición puede utilizar una dirección que en desktop funciona,

pero en mobile produce un orden inesperado.

Por ejemplo

desktop:

IMAGE | TEXT

Pero quieres mobile:

TEXT
IMAGE

No resuelvas inmediatamente duplicando:

versión desktop
+
versión mobile

Primero analiza:

• estructura;

• orden de columnas;

• Direction.

Paso 11. Orden del documento

Esto es fundamental.

La forma más robusta de mobile suele depender del orden real:

TEXT
IMAGE

Desktop puede después presentar visualmente:

TEXT | IMAGE

Pero si tu documento está:

IMAGE
TEXT

mobile normalmente seguirá ese orden.

Planifica el orden pensando también en:

• lectura;

• accesibilidad.

Paso 12. Revisa Width del elemento

Selecciona el elemento problemático.

Abre:

Estilo → Size

Revisa:

• Width;

• Min Width;

• Max Width.

Uno de los problemas más comunes:

Width:
700px

En una pantalla de:

aproximadamente 375px

el elemento puede desbordar.

Ejemplo problemático

.promo-image {
    width: 680px;
}

Alternativas más robustas pueden utilizar:

Width:
100%

Y:

Max Width:
...

según el diseño.

Paso 13. Width vs Max Width

No son iguales.

Width:

define el ancho

Max Width:

limita cuánto puede crecer

Una estrategia responsive frecuente:

width: 100%;
max-width: 600px;

Conceptualmente:

puede reducirse
↓
pero no crecer indefinidamente

Utiliza las opciones visuales del Editor cuando sea posible.

Paso 14. Min Width puede generar desbordamiento

Busca:

Min Width

Por ejemplo:

min-width: 500px;

significa:

“este elemento nunca debe medir menos de 500px”.

En celular:

eso puede generar scroll horizontal.

Si no existe una razón:

elimínalo o adapta el valor.

Paso 15. Revisa Images

Selecciona:

Image

Comprueba:

• Width;

• Height;

• propiedades de Style;

• contenedor padre.

Una Image responsive normalmente debería poder reducirse dentro del espacio disponible.

Problema típico:

Image width:
800px

La Column:

320px

Resultado:

IMAGE →→→

fuera de pantalla.

Paso 16. No arregles Images con overflow-x:hidden

Evita:

body {
    overflow-x: hidden;
}

Puede ocultar:

• Image;

• Card;

• menú;

• otros problemas.

Corrige la Image.

Paso 17. Revisa Height de Images

Una Image puede tener:

Width responsive
+
Height rígida enorme

Por ejemplo:

width: 100%;
height: 600px;

Mobile puede terminar con:

imagen ocupando casi dos pantallas

Decide si necesitas:

• otra Height;

• Auto;

• tratamiento distinto.

Paso 18. Cover y recorte mobile

Con Cover,

una Image puede verse perfecta desktop

y cortar demasiado mobile.

Ejemplo:

desktop:

[ PERSONA      ESPACIO ]

Mobile:

[ solo una parte ]

Revisa:

• Position;

• recorte;

• si conviene utilizar Image en lugar de Background.

Paso 19. Background Image

Un Background responde al tamaño de la Section,

no necesariamente al contenido de la imagen.

Por eso:

desktop:

puede verse completo

mobile:

puede recortarse mucho

No coloques:

• texto dentro del archivo;

• logo importante;

• precio;

en una zona que pueda desaparecer.

Paso 20. Revisa Background Position

Si el sujeto importante desaparece en mobile:

puedes necesitar ajustar la posición.

Pero antes pregunta:

¿Background es realmente el componente correcto?

Si la imagen contiene información,

puede ser mejor utilizar:

Image

Paso 21. Heading demasiado grande

Síntoma:

H1 ocupa 7 líneas

No cambies:

H1 → H4

para reducirlo.

Eso modifica jerarquía semántica.

Utiliza:

Estilo → Typography

Revisa:

• Font size;

• Line height;

• Letter spacing.

Paso 22. Antes de reducir Typography, revisa ancho

Puede que el Heading tenga:

Max Width:
240px

cuando dispone de:

340px

El problema no es el tamaño de fuente.

Es el ancho artificialmente limitado.

Diagnóstico:

Heading grande
+
Column correcta
+
Max Width demasiado pequeño

Solución:

revisar Max Width.

Paso 23. Revisa Line height

Un Heading puede sentirse enorme

porque:

Line height

es excesivo.

Por ejemplo:

Font size 36
Line height 70

Puede generar grandes huecos.

Ajusta proporcionalmente.

Paso 24. Letter spacing

Un Letter spacing muy alto puede provocar:

• más saltos de línea.

Especialmente en:

• títulos en mayúsculas.

Revisa antes de reducir Font size.

Paso 25. Button que sale de pantalla

Síntoma:

[ SOLICITAR INFORMACIÓN SOBRE TODOS NUESTROS SERVICIOS ]

El problema puede ser:

1. texto excesivamente largo;

2. Width fija;

3. Padding horizontal excesivo;

4. contenedor estrecho.

Revisa en ese orden.

Paso 26. Simplifica el CTA cuando sea posible

Por ejemplo:

SOLICITAR INFORMACIÓN

El contexto ya explica:

• sobre qué.

No uses CSS para hacer entrar un texto innecesariamente largo.

Paso 27. Revisa Padding del Button

Un CTA puede tener:

Padding left:
50px

Padding right:
50px

En desktop:

bien.

Mobile:

puede ser excesivo.

Ajusta,

pero conserva un área de interacción cómoda.

No reduzcas a:

2px

Paso 28. CTA principal al 100%

En algunos diseños mobile:

puede funcionar:

[        CONTACTAR        ]

con Width completa dentro del contenedor.

Pero no es obligatorio.

Utilízalo cuando:

• mejora la lectura;

• encaja con el sistema visual.

Paso 29. Dos Buttons en una línea

Desktop:

[ PRINCIPAL ] [ SECUNDARIO ]

Mobile puede necesitar:

[ PRINCIPAL ]

SECUNDARIO →

No fuerces ambos en una misma fila.

Paso 30. Cards comprimidas

Síntoma:

[Card][Card][Card]

en celular.

Revisa:

Grid Row

Configura una estructura apropiada.

Por ejemplo:

desktop:
3

tablet:
2

mobile:
1

No soluciones:

.card {
    font-size: 10px;
}

Paso 31. Cards con Height fija

Problema:

.card {
    height: 280px;
}

Desktop:

el texto entra.

Mobile:

Heading se divide en más líneas

y el Paragraph se corta.

Solución más robusta:

altura natural

cuando sea posible.

Paso 32. Height fija es especialmente peligrosa con texto

La cantidad de líneas cambia según:

ancho disponible

Por eso:

misma Height
+
menor ancho
=
riesgo de overflow

Paso 33. Min Height

Puede ser útil en ciertos diseños

pero también generar:

espacios enormes

Revisa si una Card o Section utiliza:

Min Height:
600px

Mobile puede no necesitarlo.

Paso 34. Section demasiado alta

Síntoma:

mucho espacio vacío debajo

Revisa:

1. Container height;

2. Height;

3. Min Height;

4. Padding;

5. elementos vacíos.

Si Section está configurada:

Full

puede ocupar más altura.

Para muchas Sections:

Auto

es más apropiado.

Paso 35. No utilices Full Height por estética sin probar mobile

Un Hero puede usar Full según diseño.

Pero:

Services
Benefits
Contact

normalmente no necesitan ocupar todo el viewport.

Paso 36. Revisa Margin

Uno de los causantes clásicos:

margin-left: 180px;

Desktop:

puede posicionar correctamente.

Mobile:

desplaza el elemento fuera de pantalla.

Especialmente:

• Margin left/right fijos.

Si utilizas Margin para:

crear columnas

la estructura es incorrecta.

Utiliza Grid.

Paso 37. Margen negativo

Busca:

-20px
-50px
-100px

Los márgenes negativos pueden ser válidos en ciertos detalles.

Pero si ves:

margin-left:-300px

pregunta:

¿estamos corrigiendo una mala estructura?

Paso 38. Margin lateral vs Padding del Container

Si el contenido necesita separarse del borde:

no agregues:

margin-left:50px

a todos los componentes.

Puede ser mejor:

Padding del Container/Section

Esto mantiene un sistema.

Paso 39. Padding excesivo

Problema:

Section Padding:
80px izquierda
80px derecha

En mobile:

queda:

poco espacio para contenido

Puede necesitar reducción.

No confundas:

espacio exterior desktop

con:

espacio útil mobile

Paso 40. Calcula conceptualmente

Pantalla:

375px

Si tienes:

80px izquierda
+
80px derecha

solo queda aproximadamente:

215px

para:

• Heading;

• Button;

• Form.

Puede ser insuficiente.

Paso 41. Elementos superpuestos

Síntoma:

Image
████████████
     CTA ← encima

Revisa:

Estilo → Display → Position

Puede existir:

Absolute

Y coordenadas:

• Top;

• Left;

• Bottom;

• Right.

Paso 42. Position absolute

Position absolute puede ser útil en decoraciones puntuales.

Pero elimina el elemento del flujo normal.

Por eso:

desktop

puede funcionar.

Mobile:

el contenido alrededor cambia

pero el elemento sigue situado mediante:

coordenadas

Resultado:

• superposición;

• desbordamiento.

Paso 43. Pregunta antes de mantener absolute

¿Este elemento necesita realmente estar superpuesto?

Si no:

devuélvelo al flujo normal.

Utiliza:

• Grid;

• Margin;

• Padding.

Paso 44. No uses absolute para maquetar toda una Section

Evita:

Heading absolute
Image absolute
CTA absolute
Paragraph absolute

Una pantalla fija puede verse bien.

Responsive:

será extremadamente frágil.

Paso 45. Position Relative

Un padre puede utilizar:

Relative

para contener un elemento absoluto.

Si necesitas una superposición legítima:

comprueba:

• qué elemento es el padre posicionado.

De lo contrario,

el elemento puede posicionarse respecto de un contenedor inesperado.

Paso 46. Top / Left / Right / Bottom

Busca valores como:

left: 420px

Esa cifra puede tener sentido desktop

pero no mobile.

Si la superposición es necesaria:

puedes necesitar una adaptación específica.

Pero primero intenta simplificar.

Paso 47. Float

También revisa:

Float

si existe.

Una estructura antigua basada en Float puede producir:

• posiciones inesperadas.

Si ya estás utilizando Grid Row:

normalmente no necesitas Float para distribuir columnas.

Paso 48. Display

Un elemento puede tener:

Display:
Inline

O:

Block

Esto puede afectar:

• Width;

• alineación.

Especialmente:

• Links;

• Buttons.

Comprueba antes de aplicar Width.

Paso 49. white-space en CSS personalizado

Un texto puede desbordar porque CSS tiene:

white-space: nowrap;

Resultado:

TEXTO QUE NUNCA SALTA DE LÍNEA →→→→

Esto puede afectar:

• Button;

• navegación;

• Badge;

• títulos.

Si el texto necesita envolverse:

revisa la regla.

Paso 50. Palabra o URL extremadamente larga

Incluso con layout correcto:

https://ejemplo.com/una-url-muy-muy-muy-larga...

puede generar desbordamiento.

O un código:

ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789

Revisa el contenido.

No siempre el problema es el Grid.

Paso 51. Tabla que desborda

Table puede superar el ancho mobile

cuando tiene muchas columnas.

No reduzcas todo el texto a un tamaño ilegible.

Evalúa:

• qué columnas son necesarias;

• diseño alternativo;

• comportamiento horizontal controlado si corresponde.

Una tabla de:

10 columnas

probablemente necesita una estrategia diferente para mobile.

Paso 52. Formularios comprimidos

Problema:

Nombre | Email
Empresa | Teléfono

en celular.

Cada Input queda extremadamente estrecho.

Solución:

Nombre

Email

Empresa

Teléfono

Revisa el Grid interno.

No reduzcas:

• Font size;

• Padding;

hasta hacerlos incómodos.

Paso 53. Input desborda

Busca:

Width fija

Por ejemplo:

input {
    width: 500px;
}

Esto puede generar overflow.

Además:

un selector global input puede afectar formularios fuera de la Section.

Utiliza scope.

Paso 54. Text Area

Revisa:

• Width;

• Min Width.

Un:

min-width:600px

puede romper mobile.

Paso 55. Select Input

Una opción de texto muy larga también puede afectar el control.

Prueba con:

la opción más larga

No únicamente con la primera.

Paso 56. Mapas

Un mapa puede romper mobile si:

Width:
900px

O su contenedor tiene:

Min Width elevada

No uses:

iframe {
    width: 100%;
}

globalmente

sin revisar otros Embeds.

Localiza el mapa.

Paso 57. Iframes

Un Iframe puede contener:

• video;

• mapa;

• otro contenido.

Revisa:

• Width;

• Height;

• wrapper.

Si aplicas CSS:

utiliza una Class raíz.

Paso 58. Video

Un video con:

width="800"

puede salir de pantalla.

Usa:

Embed Video

cuando corresponda

y revisa su comportamiento responsive.

Paso 59. Code / Preformatted

Un bloque de código puede contener líneas largas.

Por ejemplo:

const variableLarguisimaSinEspacios...

Puede generar scroll interno.

Esto no necesariamente significa que toda la página esté rota.

Diferencia:

scroll dentro del Code

de:

scroll horizontal de toda la página

Paso 60. Carousel

Un Carousel puede desbordar

si sus slides o Images contienen tamaños rígidos.

Revisa:

Carousel
↓
Slide
↓
Image

No modifiques primero:

Carousel completo

si el problema pertenece a Image.

Paso 61. Slider

Mismo principio.

Revisa el elemento interno.

Paso 62. Tabs

Tabs pueden fallar visualmente en mobile cuando:

hay demasiadas opciones

No reduzcas el texto de cada pestaña a:

8px

Evalúa:

• wrap;

• orientación;

• contenido.

Si el componente no ofrece una adaptación apropiada:

puede ser necesario simplificar el número de Tabs.

Paso 63. Breadcrumbs

Un Breadcrumb puede desbordar

si contiene:

• nombres extremadamente largos.

Revisa:

• texto;

• wrap.

No necesariamente necesita Width fija.

Paso 64. Button Group

Un grupo de Buttons puede funcionar desktop:

[A][B][C][D]

Mobile:

puede necesitar:

• Wrap;

• disposición vertical.

No fuerces una sola línea.

Paso 65. Social icons

Una fila con demasiados iconos puede desbordar

si tiene:

• tamaños grandes;

• separación excesiva.

Revisa:

• Wrap;

• Margin;

• tamaño.

Paso 66. Gallery

Una Gallery puede mantener demasiadas columnas en mobile.

Revisa:

• estructura;

• configuración del componente.

No reduzcas Images hasta quedar diminutas.

Paso 67. Portfolio

Mismo patrón:

desktop 3
tablet 2
mobile 1

suele ser más robusto cuando existen textos.

Paso 68. Pricing

Tres planes:

[ A ][ B ][ C ]

En mobile:

normalmente:

A
B
C

No mantengas tres Cards estrechas.

Paso 69. Card destacada de Pricing

Puede utilizar:

transform

o tamaño mayor.

Revisa mobile.

Un Plan destacado:

scale(1.05)

puede salir ligeramente del ancho.

Si genera overflow:

adapta el efecto.

Paso 70. transform

CSS como:

transform: translateX(100px);

O:

transform: scale(1.2);

puede generar problemas.

Revisa cualquier transformación antes de tocar el Grid.

Paso 71. Hover con transform

Una Card puede estar correctamente dentro de pantalla,

pero al Hover:

transform: scale(1.1);

sale del contenedor.

En desktop puede notarse solo cuando pasas el mouse.

Mobile puede comportarse distinto.

Utiliza efectos moderados.

Paso 72. Animaciones

Animate on scroll puede aplicar transformaciones durante la entrada.

Si un elemento parece:

• desplazarse fuera;

• generar espacio extraño;

prueba temporalmente:

Animation type:
none

Si el problema desaparece:

la animación participa en la causa.

No significa que debas eliminarla definitivamente.

Ajusta o simplifica.

Paso 73. Delay no genera normalmente layout

pero puede hacer parecer que:

falta contenido

durante varios segundos.

Si un visitante ve:

un hueco vacío

hasta que aparece una Card:

el Delay puede ser excesivo.

Paso 74. Elemento desaparece en mobile

Primero revisa:

Avanzado → Hide based on device screen width

Puede haber sido configurado para ocultarse.

No escribas CSS:

display:block !important;

antes de revisar la configuración.

Paso 75. Elemento aparece en desktop pero no tablet

Revisa:

• Hide Small;

• Hide Medium;

según la configuración.

Recuerda:

los nombres representan rangos de dispositivos.

No confundas:

preview tablet

con:

configuración Medium

sin comprobar el comportamiento.

Paso 76. Duplicar versiones desktop/mobile

A veces alguien crea:

Section desktop

y:

Section mobile

Luego utiliza Hide.

Esto puede funcionar,

pero genera:

• contenido duplicado;

• mantenimiento;

• Links duplicados;

• IDs duplicados.

No lo utilices como primera solución.

Intenta primero:

UNA SOLA SECTION RESPONSIVE

Paso 77. Cuándo puede ser necesario contenido diferente

Existen casos excepcionales.

Pero antes de duplicar:

pregunta:

¿podemos resolverlo mediante Grid, orden, Size y CSS localizado?

En la mayoría de los casos:

sí.

Paso 78. CSS personalizado

Si Grid y Estilo parecen correctos:

revisa:

Variables / Css

Busca reglas relacionadas con la Section.

Especialmente:

width
min-width
max-width
height
min-height
margin
padding
position
left
right
transform
white-space
overflow

Paso 79. Busca selectores globales

Problema típico:

img {
    width: 600px;
}

O:

.card {
    min-width: 450px;
}

O:

.row {
    flex-wrap: nowrap;
}

Estas reglas pueden romper múltiples Sections.

Paso 80. Scope

Mejor:

.services-section .service-card {
    ...
}

En lugar de:

.card {
    ...
}

Paso 81. Revisa media queries

Puede existir CSS:

@media (max-width: 576px) {
    ...
}

Que modifica:

• Width;

• Font size;

• Position.

Ese CSS fue creado específicamente para pantallas pequeñas.

Por lo tanto:

si el problema existe solo mobile,

revisar media queries es especialmente importante.

Paso 82. Breakpoints conocidos en el entorno

En el Editor puedes encontrar variables de breakpoint como:

xs = 0
sm = 576px
md = 768px
lg = 992px

Utiliza estos valores conocidos cuando realmente necesites CSS responsive.

No inventes breakpoints arbitrarios

si las herramientas de Grid ya resuelven el comportamiento.

Paso 83. No agregues diez media queries

Evita:

1390
1325
1278
1211
1164
1098
...

para perseguir cada ancho.

Puede ser señal de una estructura demasiado rígida.

Una buena base con Grid debería necesitar pocos ajustes excepcionales.

Paso 84. Desktop-first vs mobile

No importa únicamente dónde comenzaste.

Lo importante es:

probar todos los tamaños relevantes

Un CSS que corrige mobile:

@media (max-width: 576px) {
    ...
}

debe limitarse correctamente.

No coloques la regla fuera del media query accidentalmente.

Paso 85. !important

Si encuentras:

width: 800px !important;

puede impedir que:

Grid / Style

corrija el elemento.

Antes de agregar otro:

width:100% !important;

revisa:

¿por qué existe el primero?

Evita una guerra de !important.

Paso 86. Linked styles

Un problema puede aparecer únicamente porque modificaste un elemento:

Service Card A

pero la Class estaba compartida con:

A
B
C
D

El Editor puede mostrar el aviso:

Linked styles

Comprueba qué selector se está utilizando.

Paso 87. Cuando todas las Cards se rompen a la vez

Suele indicar:

estilo compartido

o:

problema de Grid

Cuando solo se rompe una:

puede ser:

• contenido;

• Class adicional;

• ID;

• Width propia.

Esta observación ayuda a diagnosticar.

Paso 88. Cuando solo una Image desborda

Compara:

Image A
Image B
Image C

Revisa si la problemática tiene:

• Width diferente;

• Class diferente;

• un archivo con comportamiento diferente.

No cambies todas.

Paso 89. Cuando todas las Images desbordan

Busca:

regla compartida

Por ejemplo:

.portfolio-image {
    width:700px;
}

Paso 90. Cuando toda la página tiene scroll horizontal

No empieces con:

body overflow hidden

Recorre Section por Section.

Puedes identificar:

Hero ✅
Benefits ✅
Services ❌
Projects ✅

Después:

Services:

Card A ✅
Card B ❌
Card C ✅

Ya encontraste el origen.

Paso 91. Método visual para encontrar overflow

Utiliza Navigator y selecciona elementos

mientras observas cuál supera:

los límites de pantalla

Empieza por los más probables:

• Grid;

• Image;

• Card;

• Button;

• Iframe.

Paso 92. No corrijas desde BODY

BODY es el nivel más amplio.

Si el problema pertenece a:

Image

corrige:

Image

No:

BODY

Sexta regla

Corrige siempre en el nivel más pequeño que realmente origina el problema.

Paso 93. Espacio enorme entre Sections

Puede venir de:

1. Padding bottom de Section A;

2. Padding top de Section B;

3. Margin de elemento;

4. Section vacía;

5. Min Height;

6. Full Height.

No reduzcas solamente:

margin-top

al azar.

Inspecciona ambos lados.

Paso 94. Espacios acumulados

Por ejemplo:

Section A bottom padding:
80px

Heading B margin top:
40px

Section B top padding:
80px

Total visual:

200px

En desktop puede sentirse generoso.

Mobile puede parecer excesivo.

Ajusta el sistema.

Paso 95. Paragraph crea espacio

Puede existir:

Paragraph vacío

O:

<br><br>

Utiliza Navigator para encontrarlo.

Elimina contenido de relleno.

Paso 96. Horizontal Rule

También puede tener:

• Margin;

• Padding;

que amplíen espacios.

Revisa si aparece un hueco inesperado.

Paso 97. Section vacía

Navigator puede revelar:

SECTION
└── Container

sin contenido.

Aunque esté vacía,

puede conservar:

• Padding;

• Height.

Elimínala si no cumple función.

Paso 98. Elementos ocultos que conservan espacio

Normalmente un elemento realmente oculto mediante display:none no ocupa espacio.

Pero si se utilizó otra técnica CSS como:

opacity:0

puede seguir ocupándolo.

Revisa CSS si ves un espacio inexplicable.

Paso 99. Opacity

Estilo → Display → Opacity

Un elemento con:

Opacity:
0

puede existir visualmente invisible.

No lo confundas con:

Hide based on device

Paso 100. Elementos invisibles pero clicables

Un elemento con opacity 0 puede incluso continuar:

• recibiendo interacción;

según su estructura.

Evita utilizar Opacity como método de ocultamiento responsive.

Paso 101. Z-index y superposición

Si tienes un diseño avanzado:

un elemento puede quedar:

detrás

de otro.

Antes de aumentar:

z-index:999999;

revisa:

• Position;

• jerarquía.

Z-index no corrige un layout incorrecto.

Paso 102. Elemento aparece encima del Header

Puede deberse a:

• Position fixed;

• absolute;

• z-index alto.

El Editor de bloques no edita Header,

pero CSS del contenido puede superponerse visualmente.

Revisa el elemento.

Paso 103. Elemento fixed

Si CSS utiliza:

position: fixed;

puede permanecer sobre:

• contenido;

• Footer.

Asegúrate de que sea intencional.

Un CTA normal dentro de la página:

no necesita Fixed.

Paso 104. Header y Footer

No intentes corregir el Header desde la Section

si el problema pertenece a:

plantilla

Recuerda:

Header y Footer no se editan desde el Editor de bloques.

Sin embargo:

CSS global creado dentro de tu trabajo puede afectarlos.

Paso 105. Si Header se rompe después de agregar CSS

Busca selectores como:

a

img

ul

nav

.container

Probablemente el CSS es demasiado global.

Paso 106. Si Footer cambia

Mismo análisis.

Busca:

• p;

• a;

• .row;

• .container.

Localiza tus reglas.

Paso 107. El Editor se ve diferente del frontend

Puede ocurrir que:

Editor
✅

Pero:

Ver página
❌

Por eso la prueba final siempre debe hacerse con:

Ver página

El canvas sirve para editar.

El frontend real confirma el resultado.

Paso 108. No asumas que el preview es idéntico a un dispositivo real

Preview es extremadamente útil,

pero un navegador real puede revelar:

• teclado;

• barras;

• tamaños;

• scroll.

Cuando sea posible:

prueba un celular real.

Paso 109. Método de prueba de tres niveles

Nivel 1

Editor
→ previews

Nivel 2

Ver página
→ navegador desktop redimensionado

Nivel 3

dispositivo real

Idealmente utiliza los tres.

Paso 110. No pruebes solo un ancho mobile

Un celular puede ser:

más estrecho

o:

más ancho

Prueba:

• vista pequeña;

• vista intermedia.

No necesitas perseguir todos los modelos.

El diseño responsive debe adaptarse de forma flexible.

Paso 111. Diagnóstico de scroll horizontal: checklist rápido

Si aparece:

← scroll →

revisa en este orden:

1. Grid Row;

2. Width fija;

3. Min Width;

4. Margin horizontal;

5. Padding excesivo;

6. Position absolute;

7. Transform;

8. Iframe/Image;

9. white-space: nowrap;

10. CSS global.

No empieces ocultándolo.

Paso 112. Diagnóstico de Cards estrechas

Revisa:

cantidad de columnas

Después:

Padding de Card

Después:

Typography

Orden correcto:

LAYOUT
↓
ESPACIO
↓
TIPOGRAFÍA

No al revés.

Paso 113. Diagnóstico de Heading gigante

Revisa:

1. Column Width;

2. Max Width;

3. Font size;

4. Line height;

5. Letter spacing.

No cambies nivel H.

Paso 114. Diagnóstico de Image gigante

Revisa:

1. Column;

2. Width;

3. Max Width;

4. Height;

5. Min Width;

6. CSS.

Paso 115. Diagnóstico de espacio vertical enorme

Revisa:

1. Section height;

2. Min Height;

3. Padding;

4. Margin;

5. Section vacía;

6. Paragraphs vacíos.

Paso 116. Diagnóstico de superposición

Revisa:

1. Position;

2. Top/Left/Bottom/Right;

3. Transform;

4. z-index;

5. Height.

Paso 117. Diagnóstico de orden incorrecto

Revisa:

1. orden en Navigator;

2. Direction;

3. Grid Row;

4. CSS order si existe.

No empieces duplicando contenido.

Paso 118. Diagnóstico de elemento desaparecido

Revisa:

1. Hide based on device;

2. Display;

3. Opacity;

4. CSS media query.

Paso 119. Diagnóstico de mapa/video roto

Revisa:

1. contenedor;

2. Width;

3. Height;

4. Iframe;

5. CSS localizado/global.

Paso 120. Diagnóstico de Form

Revisa:

1. Grid;

2. Width Inputs;

3. Padding;

4. Button;

5. Text Area;

6. funcionalidad después de cambios.

Recuerda:

un ajuste visual no debería romper:

• Names;

• Types;

• Form.

Paso 121. Guarda antes de realizar cambios importantes

Antes de una corrección estructural:

Guardar Cambios

De esta manera tienes un punto lógico de trabajo.

Si eliminas algo accidentalmente:

utiliza:

Deshacer

Recuerda:

eliminar no solicita confirmación.

Paso 122. No modifiques HTML como primera herramienta

Si el problema es:

Padding

no abras:

Editar código HTML <>

Utiliza:

Estilo

Si el problema es:

Column size

utiliza:

Grid Row

Si el problema es:

regla responsive especial

puedes evaluar CSS.

Utiliza siempre la herramienta más específica.

Paso 123. Si necesitas HTML

Selecciona únicamente el elemento.

Utiliza:

Editar código HTML <>

Copia primero el fragmento original.

Busca:

• Classes;

• Widths inline;

• IDs;

• estructura.

No reescribas todo.

Paso 124. Inline styles

Puedes encontrar:

style="width:700px;"

Esto puede explicar por qué:

• CSS externo parece no funcionar como esperas.

Revisa antes de agregar más reglas.

Paso 125. No borres Classes funcionales

Si encuentras:

col-sm-...

o Classes de un componente interactivo:

no las elimines sin comprenderlas.

Puede romper:

• Grid;

• Tabs;

• Carousel.

Paso 126. Code editor global

Solo utilízalo si:

necesitas analizar una estructura más amplia

No para:

un Button desbordado

Cuanto mayor el alcance de la herramienta:

mayor el riesgo de modificar algo no relacionado.

Paso 127. Bootstrap 4

Waclis utiliza:

Bootstrap 4

Si buscas ayuda con IA:

indícalo.

No aceptes soluciones que agreguen:

• Bootstrap 5;

• Tailwind.

Tu problema responsive normalmente puede resolverse dentro del sistema existente.

Paso 128. No agregues otra librería responsive

Una grilla rota no necesita:

nuevo framework

Necesita:

configuración correcta del Grid actual

Paso 129. IA para diagnosticar sin modificar

Puedes utilizar ChatGPT, Claude o Gemini.

Prompt

Tengo una sección Waclis que funciona en desktop
pero se rompe en mobile.

Síntoma exacto:
[describir]

Estructura:
[pegar jerarquía de Navigator]

Waclis utiliza Bootstrap 4.

Quiero diagnosticar antes de modificar.

Indica las posibles causas en orden de probabilidad,
revisando primero:

1. Grid Row;
2. tamaños de Columns;
3. Width/Min Width/Max Width;
4. Margin/Padding;
5. Position;
6. CSS personalizado.

No generes código todavía.

IA para scroll horizontal

En mobile toda la página tiene scroll horizontal.

HTML de la Section sospechosa:
[pegar solo esa Section]

CSS relacionado:
[pegar]

Waclis utiliza Bootstrap 4.

Busca específicamente:
- width fija;
- min-width;
- margin lateral;
- position:absolute;
- left/right;
- transform;
- white-space:nowrap;
- elementos fuera del Grid.

No corrijas todavía.
Indica el elemento más probable.

IA para Grid

Tengo esta estructura:

[pegar Grid Row]

Desktop:
3 columnas.

Tablet:
las Cards quedan estrechas.

Mobile:
continúan demasiado comprimidas.

Waclis utiliza Bootstrap 4.

Analiza cómo deberían distribuirse:
- desktop;
- tablet;
- mobile.

No generes CSS si puede resolverse mediante tamaños de Column.

IA para Image

Esta Image se ve bien en desktop pero sale de pantalla
en mobile.

HTML:
[pegar Image y su padre]

CSS:
[pegar solo reglas relacionadas]

Busca:
- width;
- max-width;
- min-width;
- height;
- margin;
- transform.

No modifiques todavía.

IA para Heading

Este H2 ocupa demasiadas líneas en mobile.

Texto:
[...]

Column Width:
[...]

Estilos:
[...]

Analiza en este orden:
1. ancho de Column;
2. Max Width;
3. Font size;
4. Line height;
5. Letter spacing.

No sugieras cambiar H2 por H4.

IA para Button

Este CTA desborda en celular.

Texto:
[...]

HTML:
[...]

CSS:
[...]

Analiza:
- longitud del texto;
- width;
- min-width;
- padding horizontal;
- white-space;
- contenedor.

No generes CSS todavía.

IA para superposición

En desktop esta composición funciona,
pero en mobile la Image se superpone al texto.

HTML:
[...]

CSS:
[...]

Busca:
- position:absolute;
- top/left/right/bottom;
- transform;
- z-index;
- height fija.

Propón primero una solución basada en flujo normal / Grid.

No generes código todavía.

IA para espacios

En mobile existe un gran espacio vacío entre estas dos Sections.

HTML:
[...]

CSS:
[...]

Analiza:
- padding-bottom de la primera;
- padding-top de la segunda;
- margin;
- min-height;
- height;
- elementos vacíos.

No propongas margin negativo como primera solución.

IA para CSS global

Revisa este CSS de Waclis:

[pegar]

Busca reglas globales que puedan generar problemas responsive:

body
section
.container
.row
.col
img
.card
a
button
input
iframe

Indica:
- selector;
- propiedad problemática;
- alcance potencial.

No modifiques todavía.

IA para !important

Este CSS utiliza varios !important:

[pegar]

Identifica:
- cuáles están bloqueando ajustes responsive;
- cuáles parecen innecesarios;
- qué selector podría mejorarse.

No elimines nada automáticamente.

IA para media queries

Tengo estas media queries:

[pegar]

Waclis utiliza Bootstrap 4.

Revisa:
- reglas contradictorias;
- breakpoints redundantes;
- propiedades que podrían resolverse mediante Grid Row;
- reglas mobile que afectan desktop por estar fuera de la media query.

No reescribas todavía.

IA para orden mobile

Desktop quiero:

IMAGE | TEXT

Pero en mobile necesito:

TEXT
IMAGE

Esta es la estructura actual:

[pegar]

Waclis utiliza Bootstrap 4.

Analiza la estrategia más simple
sin duplicar contenido ni agregar JavaScript.

IA para formulario

Este Form Waclis se comprime demasiado en mobile.

Estructura:
[...]

No quiero modificar la funcionalidad.

Analiza únicamente:
- Grid;
- Columns;
- Width;
- Padding;
- Button;
- Text Area.

No cambies:
- Name;
- Id;
- Type;
- atributos funcionales.

IA para comparar antes/después

Tengo dos capturas:

1. antes de corregir;
2. después.

Analiza si el problema responsive fue realmente resuelto
o solo ocultado.

Busca especialmente:
- contenido cortado;
- overflow oculto;
- Font size excesivamente reducido;
- elementos desaparecidos.

No generes código.

IA para la menor corrección posible

Causa confirmada:
[describir]

HTML:
[...]

CSS:
[...]

Genera la corrección mínima necesaria.

Waclis utiliza Bootstrap 4.

Restricciones:
- no agregar frameworks;
- no cambiar HTML si no es necesario;
- no utilizar !important salvo justificación;
- no modificar otras Sections;
- no ocultar overflow como parche.

IA para revisión después de corregir

Después de esta corrección mobile:

[CSS]

Analiza si existe riesgo de romper:
- tablet;
- desktop;
- otros componentes.

Busca selectores globales y propiedades no limitadas al breakpoint.

Caso práctico 1: Cards que no se apilan

Síntoma

Desktop:

[ A ][ B ][ C ]

Mobile:

[ A ][ B ][ C ]

pero demasiado estrechas.

Diagnóstico

Selecciona:

Grid Row

Revisa tamaños de Columns.

Objetivo:

Desktop
4 + 4 + 4

Mobile:

12
12
12

Corrección:

Grid,

no Font size.

Caso práctico 2: Image desborda

Síntoma

| pantalla |
|          | IMAGE →→→

Diagnóstico

Image:

Width 700px

Causa:

ancho rígido.

Corrección:

hacer que pueda adaptarse al contenedor,

utilizando las opciones apropiadas de Size.

No:

body {
    overflow-x:hidden;
}

Caso práctico 3: Hero se superpone

Desktop:

TEXT    IMAGE

Mobile:

TEXT
IMAGE SOBRE CTA

Diagnóstico:

Image:

Position absolute

con:

right:0
top:...

Primera pregunta:

¿necesitamos absolute?

Si no:

integrar Image al Grid.

Caso práctico 4: Heading enorme

Mobile:

UNA
PROPUESTA
PARA
TU
NEGOCIO
...

Diagnóstico:

1. Column;

2. Max Width;

3. Font size;

4. Line height.

No:

cambiar H1 a H5

Caso práctico 5: espacio gigante

SECTION A


[ enorme vacío ]


SECTION B

Diagnóstico:

Section A bottom padding:
96

Section B top padding:
96

Además:

Min Height:
400

Corrige:

• Padding;

• Min Height;

de manera coherente.

No:

margin-top:-250px;

Caso práctico 6: Button largo

Mobile:

[ QUIERO SOLICITAR INFORMACIÓN
  SOBRE TODOS LOS SERVICIOS ]

Diagnóstico:

• texto;

• Padding;

• Width.

Solución editorial:

SOLICITAR INFORMACIÓN

Después revisar estilo.

Caso práctico 7: Form de dos columnas

Desktop:

Nombre | Email
Empresa | Teléfono

Mobile:

Na | Em
Em | Te

Diagnóstico:

Grid interno.

Corrección:

Nombre
Email
Empresa
Teléfono

No cambiar:

• Type;

• Name.

Caso práctico 8: Background Image mal recortado

Desktop:

[ TEXTO       PERSONA ]

Mobile:

[ TEXTO PERSON ]

con mala legibilidad.

Opciones:

• Background Position;

• Overlay;

• otra imagen;

• utilizar Image en una Column.

No intentes corregir únicamente:

Font size

si el verdadero problema es el fondo.

Caso práctico 9: Card destacada desborda

.featured-card {
    transform: scale(1.08);
}

Desktop:

correcto.

Mobile:

sale de los bordes.

Corrección:

adaptar/eliminar la transformación en pantallas pequeñas,

si realmente se necesita.

Caso práctico 10: regla global rompe todo

img {
    width:700px;
}

Efectos:

• Hero roto;

• proyectos rotos;

• Gallery rota.

Corrección:

eliminar la regla global

y localizar:

.my-section .my-image {
    ...
}

Caso práctico 11: .row sin Wrap

.row {
    flex-wrap: nowrap;
}

Resultado:

muchas grillas dejan de apilar.

Corrección:

no modificar .row global.

Si un bloque concreto necesita un comportamiento:

localízalo.

Caso práctico 12: ancho fijo en iframe

iframe {
    width: 900px;
}

Resultado:

• mapa;

• video;

desbordan.

No afectes todos los Iframes.

Localiza el componente concreto.

Caso práctico 13: contenido duplicado mobile/desktop

Navigator:

Hero Desktop
Hero Mobile

Ambos contienen:

id="contacto"

Problema:

IDs duplicados.

Además:

doble mantenimiento.

Primero evalúa si puedes reconstruir:

un único Hero responsive

Caso práctico 14: la solución móvil rompe desktop

Agregas:

.hero-title {
    font-size:24px;
}

Resultado:

mobile ✅

desktop:

también 24px ❌

Faltó limitar la regla.

Si solo corresponde mobile:

debe estar dentro de un alcance responsive apropiado.

Caso práctico 15: media query demasiado amplia

@media (max-width: 1200px) {
    .hero-title {
        font-size:24px;
    }
}

Puede afectar:

• tablet;

• laptops.

El breakpoint debe responder al problema real.

No elijas un número arbitrario.

Caso práctico 16: ocultar el problema

html,
body {
    overflow-x:hidden;
}

Visualmente:

scroll desaparece.

Pero:

Image continúa a 900px.

Esto no es una corrección.

Octava regla

Una corrección responsive correcta elimina la causa, no solamente su consecuencia visual.

Paso 130. Orden recomendado de corrección

Cuando encuentres un problema:

corrige en este orden siempre que tenga sentido:

1. CONTENIDO
↓
2. ESTRUCTURA
↓
3. GRID
↓
4. SIZE
↓
5. SPACING
↓
6. TYPOGRAPHY
↓
7. CSS
↓
8. EFECTOS

¿Por qué contenido primero?

Porque un Button que dice:

SOLICITAR INFORMACIÓN SOBRE TODOS
NUESTROS SERVICIOS PROFESIONALES

puede resolverse editorialmente.

No necesitas:

10 reglas CSS

¿Por qué Grid antes que CSS?

Porque:

3 columnas en celular

es un problema de layout.

No de:

Font size

¿Por qué effects al final?

Porque:

transform
animation

son mejoras.

La sección primero debe funcionar sin ellas.

Paso 131. Desactiva temporalmente efectos durante el diagnóstico

Si no sabes qué ocurre:

quita temporalmente:

• Hover especial;

• Animate on scroll;

• transform.

Si el layout queda correcto:

vuelve a incorporarlos uno por uno.

Paso 132. Utiliza una “versión mínima”

Por ejemplo:

Card problemática:

Image
Heading
Paragraph
Button
Animation
Hover
Shadow
Transform

Puedes probar:

Image
Heading
Paragraph
Button

Si funciona:

el problema está en los efectos.

Paso 133. Prueba el contenido más largo

No pruebes únicamente:

Servicio A

Prueba:

Servicio de implementación y personalización avanzada

Esto ayuda a comprobar que la estructura es robusta.

Paso 134. Prueba la Card con más texto

Si una grilla contiene seis:

busca la más difícil.

No diseñes solo alrededor de:

la más corta

Paso 135. Prueba la Image más problemática

Por ejemplo:

• logo horizontal;

• captura vertical.

Si la estructura soporta esos casos:

será más estable.

Paso 136. Prueba CTA secundario

A veces el principal funciona

pero:

CTA secundario

genera el overflow.

Revisa todos los elementos.

Paso 137. Revisa la Section anterior y siguiente después de corregir

Modificar:

Margin bottom

puede resolver un espacio

pero dejar ambas Sections pegadas.

Mira:

contexto completo

Paso 138. No optimices solamente para una captura

Una Section responsive debe funcionar con:

• varios anchos.

No persigas:

exactamente 390px

si:

375

se rompe.

Utiliza estructura flexible.

Paso 139. Prueba orientación horizontal cuando corresponda

Tablet/celular pueden utilizarse en:

• portrait;

• landscape.

No necesitas una versión especial para cada orientación,

pero una estructura flexible debería soportarlas razonablemente.

Paso 140. Zoom del navegador

Aumentar zoom puede simular:

• menos espacio disponible.

Si el contenido se corta inmediatamente:

revisa:

• Width/Height fijos.

Paso 141. Texto más grande

Los usuarios pueden utilizar configuraciones de texto mayores.

Evita layouts que funcionen únicamente cuando:

cada título ocupa exactamente una línea

Permite crecimiento.

Paso 142. No uses Height para “alinear” Cards con texto

Puede fallar con:

• idioma;

• zoom;

• contenido futuro.

Utiliza:

• flex;

• estructura;

cuando realmente necesites altura uniforme.

Paso 143. Responsive no significa esconder

Una buena adaptación:

REORDENA
REDUCE COLUMNAS
AJUSTA ESPACIOS

No necesariamente:

ELIMINA CONTENIDO

Paso 144. Responsive tampoco significa hacer todo pequeño

No:

Font size ↓↓↓
Image ↓↓↓
Button ↓↓↓

La solución suele ser:

APILAR

El celular tiene menos ancho,

pero sigue teniendo:

scroll vertical

Utilízalo.

Paso 145. No tengas miedo de una página mobile más larga

Una Section que pasa de:

3 columnas

a:

1 columna

naturalmente será más alta.

Eso no es un error.

Error sería:

• texto ilegible;

• contenido cortado.

Paso 146. Revisión de breakpoints

Cuando hayas solucionado:

comprueba:

Extra small
Small
Medium
Large

en los rangos relevantes.

No basta con:

desktop
+
mobile

Tablet puede revelar transiciones problemáticas.

Paso 147. No inventes valores exactos para Xl/Xxl

Utiliza:

• controles del Editor;

si necesitas esos niveles.

Los valores exactos que no hayas confirmado no son necesarios para realizar la configuración visual.

Paso 148. Guardar Cambios después de la corrección

Cuando el problema esté resuelto:

Guardar Cambios

No existe un segundo paso de publicación.

Paso 149. Ver página

Después:

Ver página

Comprueba:

desktop
tablet
mobile

Y la Section:

• anterior;

• posterior.

Paso 150. Verifica que no rompiste algo relacionado

Si corregiste:

.card

globalmente:

puede que:

• Services;

• Pricing;

• Portfolio;

hayan cambiado.

Por eso:

CSS localizado.

Paso 151. Recorre toda la página

Una corrección responsive no termina en:

“esta Section está bien”

Recorre toda la página.

Especialmente si modificaste:

• CSS compartido;

• Linked styles.

Paso 152. Comprueba Links y formularios

Si reorganizaste:

• Buttons;

• Form;

vuelve a probar funcionalidad.

Responsive no es únicamente apariencia.

Paso 153. Comprueba animaciones

Si las desactivaste:

actívalas nuevamente

y revisa:

• mobile.

Si rompen:

simplifícalas.

Paso 154. Criterio de resolución

El problema está realmente resuelto cuando:

NO hay scroll horizontal

y:

NO hay contenido cortado

y:

NO ocultaste información importante

y:

desktop sigue funcionando

y:

tablet funciona

y:

mobile funciona

Y la solución:

es comprensible y mantenible

Tabla rápida de diagnóstico

Checklist de scroll horizontal

• Revisé Grid Row.

• Revisé tamaños de Columns.

• Revisé Wrap.

• Revisé Width.

• Revisé Min Width.

• Revisé Max Width.

• Revisé Margin left/right.

• Revisé Padding horizontal.

• Revisé Position.

• Revisé transform.

• Revisé Images.

• Revisé Iframes.

• Revisé white-space.

• No utilicé overflow-x:hidden como parche.

Checklist de Grid

• Desktop utiliza una cantidad apropiada de columnas.

• Tablet tiene una configuración apropiada.

• Mobile tiene una configuración apropiada.

• Las Columns pueden hacer Wrap cuando corresponde.

• El orden mobile es lógico.

• No creé columnas mediante Margins.

• No utilicé Width fija para sustituir Grid.

• Revisé Vertical align.

• Revisé Horizontal align.

• Revisé Direction.

Checklist de Size

• Revisé Width.

• Revisé Height.

• Revisé Min Width.

• Revisé Min Height.

• Revisé Max Width.

• Revisé Max Height.

• No existen valores rígidos innecesarios.

• Las Images pueden reducirse.

• Los Iframes pueden adaptarse.

• Las Cards pueden crecer verticalmente.

Checklist de espacio

• Revisé Padding de Section.

• Revisé Padding de Container.

• Revisé Padding de Card.

• Revisé Margin.

• No existen Margins negativos innecesarios.

• No hay Paragraphs vacíos.

• No hay <br> usados como layout.

• No hay Section vacía.

• El espacio mobile es menor cuando corresponde.

• No dejé contenido pegado a los bordes.

Checklist de Position

• Revisé Static/Relative/Absolute.

• Absolute solo se utiliza cuando es necesario.

• Revisé Top.

• Revisé Left.

• Revisé Right.

• Revisé Bottom.

• Revisé z-index cuando corresponde.

• No utilicé absolute para maquetar toda la Section.

• No utilicé Fixed para un CTA normal.

• El contenido principal permanece en flujo.

Checklist de Typography

• No cambié el nivel del Heading por tamaño.

• Revisé Font size.

• Revisé Line height.

• Revisé Letter spacing.

• Revisé ancho de Column antes de reducir Font.

• Tablet sigue siendo legible.

• Mobile sigue siendo legible.

• Buttons tienen textos breves.

• No reduje textos hasta tamaños incómodos.

Checklist de Images

• Width se adapta.

• Max Width tiene sentido.

• No hay Min Width excesivo.

• Height tiene sentido.

• Cover/Contain fue revisado.

• Background Position funciona.

• No existe deformación.

• Mobile mantiene información importante.

• No hay scroll horizontal.

• Alt continúa siendo correcto.

Checklist de visibilidad

• Revisé Hide based on device.

• No confundí Preview con Hide.

• Revisé Display.

• Revisé Opacity.

• No oculté contenido importante para solucionar el layout.

• No dupliqué versión desktop/mobile innecesariamente.

• Si existe contenido duplicado, los IDs son únicos.

Checklist de CSS

• Revisé Width fijas.

• Revisé Min Width.

• Revisé Height fija.

• Revisé Margin.

• Revisé Position absolute.

• Revisé transform.

• Revisé white-space:nowrap.

• Revisé overflow.

• Revisé media queries.

• Revisé !important.

• Revisé selectores globales.

• El CSS corregido tiene scope.

• No agregué Bootstrap adicional.

• No agregué otro framework.

Checklist de Linked styles

• Revisé si el elemento comparte estilos.

• Determiné si quiero que el cambio sea compartido.

• Si no, utilicé una variante apropiada.

• No agregué IDs repetidos.

• No resolví cada elemento con un ID distinto sin necesidad.

• Después del cambio revisé otros componentes relacionados.

Checklist de formularios

• El Form mantiene su estructura funcional.

• Inputs se adaptan a mobile.

• Text Area no desborda.

• Select no desborda.

• Button entra correctamente.

• No cambié Name.

• No cambié Type por estética.

• No rompí el envío.

• Realicé una nueva prueba funcional después de modificar.

Checklist de componentes interactivos

• Tabs siguen funcionando.

• Accordeon sigue funcionando.

• Carousel sigue funcionando.

• Slider sigue funcionando.

• Hover no es necesario para comprender.

• Animate on scroll no rompe el layout.

• Touch funciona.

• No eliminé Classes funcionales.

Checklist de diagnóstico profesional

• Definí exactamente el síntoma.

• Identifiqué el elemento problemático.

• Revisé Navigator.

• Revisé el padre.

• Revisé Grid antes de CSS.

• Cambié una variable por vez.

• Identifiqué la causa original.

• Corregí en el nivel más pequeño posible.

• No oculté el síntoma.

• No agregué parches innecesarios.

• Documenté mentalmente qué causaba el problema.

Checklist final

• Desktop sigue funcionando.

• Tablet funciona.

• Mobile funciona.

• No existe scroll horizontal.

• No hay contenido cortado.

• No hay superposiciones inesperadas.

• No hay espacios gigantes.

• El orden de lectura es correcto.

• Los Buttons son utilizables.

• Las Images se adaptan.

• Formularios funcionan.

• Componentes interactivos funcionan.

• Guardé los cambios.

• Utilicé Ver página.

• Revisé la página completa.

• Probé un dispositivo real cuando fue posible.

• La corrección es mantenible.

En resumen

Cuando una Section se rompe en celular:

no comiences con:

@media...

Comienza con:

¿QUÉ ELEMENTO SE ROMPE?

Después:

¿QUÉ LO CONTIENE?

Y:

¿ES UN PROBLEMA DE GRID?

Después:

¿TIENE WIDTH / MIN WIDTH RÍGIDO?

Después:

¿MARGIN / PADDING EXCESIVO?

Después:

¿POSITION ABSOLUTE?

Después:

¿CSS PERSONALIZADO?

Solamente entonces:

¿NECESITO UNA REGLA RESPONSIVE NUEVA?

El orden correcto suele ser:

CONTENIDO
↓
ESTRUCTURA
↓
GRID
↓
SIZE
↓
SPACING
↓
TYPOGRAPHY
↓
CSS
↓
EFECTOS

Para scroll horizontal:

NO:
overflow-x:hidden

Primero:

ENCONTRAR ELEMENTO DESBORDADO

Para Cards estrechas:

NO:
font-size diminuto

Primero:

REDUCIR CANTIDAD DE COLUMNAS

Para elementos superpuestos:

NO:
z-index más grande

Primero:

REVISAR POSITION

Para espacios gigantes:

NO:
margin-top:-250px

Primero:

REVISAR HEIGHT
+
PADDING
+
MARGIN
+
SECTIONS VACÍAS

Para Headings:

NO:
H2 → H5

Primero:

GRID
+
WIDTH
+
TYPOGRAPHY

Y la regla más importante:

CORREGIR LA CAUSA
>
OCULTAR EL SÍNTOMA

Finalmente

un proceso profesional se ve así:

PROBLEMA
↓
SÍNTOMA CONCRETO
↓
ELEMENTO
↓
NAVIGATOR
↓
PADRE
↓
GRID
↓
SIZE
↓
SPACING
↓
POSITION
↓
CSS
↓
LINKED STYLES
↓
CORRECCIÓN MÍNIMA
↓
DESKTOP
↓
TABLET
↓
MOBILE
↓
GUARDAR CAMBIOS
↓
VER PÁGINA
↓
VALIDACIÓN FINAL

Una corrección responsive está realmente bien realizada cuando puedes explicar:

“El problema ocurría por esta propiedad concreta, la corregí en el elemento o contenedor que correspondía y la Section ahora se adapta correctamente sin esconder contenido, sin romper otros tamaños y sin depender de parches innecesarios.”

Ese es el objetivo del diagnóstico responsive:

no conseguir que el error deje de verse,

sino conseguir que deje de existir.