¿Cómo adaptar bloques para celular, tablet y computadora en el Editor de bloques de Waclis?

Una misma Página web puede verse de manera muy diferente según el dispositivo desde el que se visite.

Un diseño que funciona correctamente en una computadora puede necesitar ajustes para verse bien en:

• celular;

• tablet;

• pantallas grandes.

El Editor de bloques de Waclis incluye diferentes herramientas para ayudarte a crear diseños responsive y comprobar cómo se comporta el contenido en distintos tamaños de pantalla.

En este tutorial aprenderás a utilizar:

• las vistas de dispositivo;

• la configuración responsive de Grid Row;

• los tamaños de columnas;

• las opciones de visibilidad por dispositivo;

• Width, Height, Min y Max;

• Margin y Padding;

• imágenes responsive;

• Navigator para revisar estructuras;

• buenas prácticas para adaptar bloques sin duplicar contenido innecesariamente.

¿Qué significa diseño responsive?

Un diseño responsive es aquel que se adapta al espacio disponible.

Esto significa que una misma sección puede modificar su distribución automáticamente según el ancho de pantalla.

Por ejemplo:

Computadora

[ IMAGEN ]    [ TÍTULO + TEXTO + BOTÓN ]

Celular

[ IMAGEN ]

[ TÍTULO ]

[ TEXTO ]

[ BOTÓN ]

El contenido sigue siendo el mismo.

Lo que cambia es su organización.

Responsive no significa crear una página diferente para cada dispositivo

En la mayoría de los casos no necesitas construir:

• una versión para desktop;

• otra para tablet;

• otra para celular.

El objetivo es crear una misma estructura capaz de adaptarse.

Para conseguirlo puedes utilizar las herramientas responsive disponibles dentro del Editor de bloques.

Tres herramientas que no debes confundir

Waclis dispone de varias funciones relacionadas con dispositivos, pero no hacen lo mismo.

1. Vistas de dispositivo

Sirven para previsualizar cómo se ve el diseño.

2. Configuración responsive de Grid Row

Permite determinar cómo se distribuyen realmente las columnas según el tamaño de pantalla.

3. Hide based on device screen width

Permite ocultar realmente un elemento en determinados tamaños.

Esta diferencia es fundamental.

1. Vistas de dispositivo

En la barra superior del Editor de bloques encontrarás iconos que permiten cambiar el ancho del área de trabajo.

Puedes utilizar vistas correspondientes a diferentes tipos de pantalla, como:

• celular;

• tablet;

• computadora.

Al seleccionar una de ellas, el editor cambia el ancho del área central para que puedas comprobar cómo responde el diseño.

¿Qué sucede cuando cambio a vista móvil?

Cambiar a vista móvil no modifica automáticamente el contenido.

Simplemente te permite observarlo dentro de un ancho similar al de un celular.

Por ejemplo, una fila puede verse así en desktop:

[ 1 ] [ 2 ] [ 3 ]

y al cambiar a móvil puede aparecer:

[ 1 ]

[ 2 ]

[ 3 ]

si la estructura ya está configurada para adaptarse.

Importante

Seleccionar el icono de celular no significa que el contenido solamente vaya a mostrarse en celular.

Es una vista de comprobación.

La visibilidad real se controla desde otras configuraciones.

¿Para qué sirven las vistas responsive?

Puedes utilizarlas para detectar problemas como:

• textos demasiado grandes;

• imágenes recortadas;

• botones que no entran;

• columnas demasiado estrechas;

• márgenes excesivos;

• contenido fuera de pantalla;

• espacios innecesarios;

• fondos que se recortan incorrectamente.

Orden recomendado de comprobación

Después de realizar una modificación importante, revisa:

1. computadora;

2. tablet;

3. celular.

No esperes hasta terminar toda la página para comprobar móvil.

Es más sencillo corregir cada sección mientras la vas construyendo.

2. Grid Row y diseño responsive

Uno de los componentes más importantes para adaptar una sección es:

Grid Row

Grid Row permite trabajar con filas y columnas.

Cuando seleccionas una fila puedes configurar:

• Direction;

• Vertical align;

• Horizontal align;

• Wrap;

• columnas;

• tamaño de columnas según dispositivo.

Cómo funciona una grilla

Una fila puede dividirse en diferentes columnas.

Por ejemplo:

Grid Row
├── Column 1
├── Column 2
└── Column 3

Visualmente:

[ COLUMNA 1 ] [ COLUMNA 2 ] [ COLUMNA 3 ]

El sistema de 12 columnas

La distribución habitual de la grilla utiliza una base de 12 unidades.

Por ejemplo:

Una única columna

12

Resultado:

[            100 %            ]

Dos columnas iguales

6 + 6

Resultado:

[       50 %       ] [       50 %       ]

Tres columnas iguales

4 + 4 + 4

Resultado:

[    33 %    ] [    33 %    ] [    33 %    ]

Cuatro columnas iguales

3 + 3 + 3 + 3

Resultado:

[ 25 % ] [ 25 % ] [ 25 % ] [ 25 % ]

La misma columna puede tener diferentes tamaños según el dispositivo

Aquí aparece una de las grandes ventajas del sistema responsive.

Una columna puede ocupar:

• una determinada proporción en desktop;

• otra en tablet;

• todo el ancho en celular.

Por ejemplo:

Desktop

[ Servicio 1 ] [ Servicio 2 ] [ Servicio 3 ]

Tres columnas.

Tablet

[ Servicio 1 ] [ Servicio 2 ]

[ Servicio 3 ]

Celular

[ Servicio 1 ]

[ Servicio 2 ]

[ Servicio 3 ]

No necesitas crear tres bloques diferentes.

Breakpoints disponibles

En las configuraciones responsive aparecen diferentes tamaños de pantalla, como:

• Extra small;

• Small;

• Medium;

• Large;

• Extra large;

• Extra extra large.

También puedes encontrarlos representados mediante abreviaturas como:

xs
sm
md
lg
xl
xxl

Cada uno representa un rango de ancho de pantalla.

No necesitas memorizar todos los valores

Para trabajar visualmente no es imprescindible memorizar los píxeles exactos de cada breakpoint.

Puedes pensar en ellos de manera progresiva:

xs / sm → pantallas pequeñas.

md → pantallas intermedias.

lg / xl / xxl → pantallas más grandes.

Lo importante es comprobar el comportamiento real mediante las vistas disponibles.

Ejemplo: imagen y texto

Supongamos que quieres crear:

[ IMAGEN ] [ TEXTO ]

En computadora quieres dos columnas iguales.

Puedes utilizar conceptualmente:

Desktop:
6 + 6

Pero en celular quieres:

12
12

Resultado:

Desktop:

[ IMAGEN ] [ TEXTO ]

Mobile:

[ IMAGEN ]

[ TEXTO ]

Ejemplo: cuatro categorías

En desktop:

[ 1 ] [ 2 ] [ 3 ] [ 4 ]

En tablet:

[ 1 ] [ 2 ]

[ 3 ] [ 4 ]

En celular:

[ 1 ]

[ 2 ]

[ 3 ]

[ 4 ]

Este tipo de adaptación suele ser mucho más apropiado que reducir las cuatro tarjetas hasta hacerlas demasiado pequeñas.

Direction

Dentro de Grid Row encontrarás:

Direction

Esta propiedad permite determinar la dirección de los elementos.

Puede ser útil para modificar el orden visual de determinados componentes.

Sin embargo, para estructuras habituales suele ser preferible trabajar primero con las columnas y su comportamiento responsive.

Wrap

Wrap permite que los elementos pasen a una nueva línea cuando no disponen de suficiente espacio.

Es una propiedad importante en diseños flexibles.

Por ejemplo:

[ 1 ] [ 2 ] [ 3 ] [ 4 ]

puede reorganizarse como:

[ 1 ] [ 2 ]

[ 3 ] [ 4 ]

cuando el ancho disponible disminuye.

Vertical align

Controla cómo se alinean verticalmente los elementos de una fila.

Por ejemplo:

[ IMAGEN ALTA ]   Título
                  Texto
                  Botón

Puedes utilizar la alineación para conseguir que ambas columnas se relacionen visualmente de manera adecuada.

Horizontal align

Controla la alineación horizontal dentro de la estructura.

Puede ser útil cuando los elementos no ocupan todo el ancho de la fila.

Orden del contenido en móvil

Cuando una fila pasa de varias columnas a una sola, el orden de los elementos adquiere mucha importancia.

Por ejemplo:

Desktop

[ TEXTO ] [ IMAGEN ]

en móvil puede convertirse en:

[ TEXTO ]

[ IMAGEN ]

Pero quizás prefieras:

[ IMAGEN ]

[ TEXTO ]

Por eso debes comprobar el orden real después de adaptar las columnas.

No evalúes solamente el ancho

Un diseño responsive no consiste únicamente en cambiar columnas.

También debes revisar:

• tipografía;

• imágenes;

• botones;

• Margin;

• Padding;

• alturas;

• fondos;

• alineaciones;

• orden del contenido;

• elementos interactivos.

3. Hide based on device screen width

Dentro de:

Avanzado

encontrarás:

Hide based on device screen width

Esta herramienta permite ocultar un elemento en determinados tamaños de pantalla.

Entre las opciones disponibles aparecen:

• Extra small devices;

• Small devices;

• Medium devices;

• Large devices;

• XL devices;

• XXL devices.

¿Qué significa ocultar por dispositivo?

Supongamos que tienes:

Texto + imagen decorativa

En desktop quieres mostrar ambos.

En celular consideras que la imagen no aporta información y ocupa demasiado espacio.

Puedes configurar:

Desktop:
[ IMAGEN ] [ TEXTO ]

Mobile:
[ TEXTO ]

ocultando Image en los tamaños correspondientes.

Vista móvil y Hide no son lo mismo

Esta diferencia merece repetirse porque es una de las confusiones más frecuentes.

Vista móvil

Solo cambia la forma en que tú estás viendo el editor.

Hide based on device screen width

Cambia la forma en que el visitante verá realmente el elemento según el ancho de su pantalla.

¿Cuándo conviene ocultar un elemento?

Puede resultar útil para:

• imágenes puramente decorativas;

• elementos redundantes;

• determinados recursos visuales muy grandes;

• versiones alternativas de un diseño;

• información secundaria;

• componentes que no funcionan bien en un dispositivo determinado y tienen una alternativa.

¿Cuándo no conviene ocultar?

No deberías utilizar esta función como solución automática para cualquier problema responsive.

Por ejemplo:

Si tienes:

[ Producto 1 ] [ Producto 2 ] [ Producto 3 ]

y no entran en celular, no es recomendable simplemente ocultar Producto 2 y Producto 3.

Es preferible reorganizar:

[ Producto 1 ]

[ Producto 2 ]

[ Producto 3 ]

si todo el contenido sigue siendo importante.

Antes de ocultar, intenta adaptar

Utiliza este orden:

1. revisa la estructura;

2. adapta columnas;

3. ajusta tamaños;

4. revisa Margin y Padding;

5. adapta tipografía;

6. ajusta imágenes;

7. recién después considera ocultar.

Crear versiones diferentes para desktop y móvil

En determinados diseños puede ser útil tener dos versiones.

Por ejemplo:

Banner Desktop
Banner Mobile

Puedes configurar:

Banner Desktop

visible solamente en pantallas grandes.

Y:

Banner Mobile

visible solamente en pantallas pequeñas.

Esto puede ser útil cuando ambas composiciones necesitan proporciones muy diferentes.

Cuidado con duplicar demasiado contenido

Aunque esta técnica es válida, no conviene utilizarla para cada sección.

Tener dos versiones de todo significa que posteriormente tendrás que mantener:

• dos títulos;

• dos imágenes;

• dos enlaces;

• dos configuraciones.

Utiliza versiones separadas solamente cuando la adaptación mediante responsive no sea suficiente.

Width y responsive

Dentro de:

Estilo → Size

puedes encontrar:

• Width;

• Height;

• Min Width;

• Min Height;

• Max Width;

• Max Height.

Estas propiedades pueden influir considerablemente en el comportamiento responsive.

Evita anchos fijos demasiado grandes

Por ejemplo:

Width: 1200px

en un elemento puede funcionar en una pantalla grande pero desbordar un celular.

Siempre que sea posible, evita valores rígidos innecesarios.

Max Width puede ser útil

Supongamos que tienes un párrafo.

En una pantalla muy grande puede terminar ocupando una línea excesivamente larga.

Puedes limitarlo mediante Max Width para mejorar su legibilidad.

Por ejemplo:

┌──────────────────────────────────────────────────┐

        Este texto permanece dentro de
        una anchura razonable y resulta
        más cómodo de leer.

└──────────────────────────────────────────────────┘

Min Width

Puede utilizarse cuando un componente necesita conservar un tamaño mínimo.

Debes comprobar siempre que ese mínimo no genere desbordamiento en dispositivos pequeños.

Height

Los valores de altura fija requieren especial cuidado.

Supongamos que una tarjeta tiene:

Height: 300px

y posteriormente el texto aumenta.

Podría ocurrir que:

• el contenido desborde;

• quede cortado;

• se superponga.

En muchos casos conviene permitir que la altura dependa del contenido.

Min Height

Puede resultar útil cuando quieres que varias tarjetas mantengan una altura mínima visual similar.

Por ejemplo:

[ Tarjeta ] [ Tarjeta ] [ Tarjeta ]

Aunque una tenga un poco más de texto que otra.

Max Height

Permite limitar el crecimiento vertical.

Debe utilizarse con cuidado en contenidos dinámicos o textos que puedan variar.

Imágenes responsive

Las imágenes son uno de los elementos que más conviene revisar en diferentes dispositivos.

Al seleccionar Image puedes encontrar opciones como:

• Width;

• Height;

• Align;

• otras configuraciones visuales.

Evita deformar imágenes

Una imagen puede deformarse si fuerzas simultáneamente ancho y alto sin respetar su proporción.

Por ejemplo:

Fotografía original:

1600 × 900

Si la fuerzas a:

300 × 300

puede quedar estirada o aplastada dependiendo de cómo esté configurada.

Cover y Contain

Cuando trabajas con imágenes de fondo o determinados contenedores puedes encontrarte con conceptos como:

Cover

y

Contain

Cover

La imagen llena todo el espacio.

Puede recortar partes de la fotografía.

Por ejemplo:

┌──────────────────────┐
│██████████████████████│
│████   IMAGEN   ██████│
│██████████████████████│
└──────────────────────┘

Es habitual en fondos, banners y tarjetas visuales.

Contain

Intenta mostrar la imagen completa.

Puede dejar espacio libre dentro del contenedor cuando las proporciones no coinciden.

Es útil cuando es importante mostrar el objeto completo.

¿Cuál utilizar?

Depende del objetivo.

Fotografía de fondo

Suele ser habitual priorizar que cubra el espacio.

Imagen de producto o logotipo

Puede ser más importante mostrarla completa.

Position X y Position Y

Cuando utilizas Background Image puedes ajustar:

• Position X;

• Position Y.

Esto es especialmente importante porque una imagen puede recortarse de forma diferente según el ancho de pantalla.

Ejemplo

Una fotografía contiene a una persona a la derecha.

En desktop:

[ TEXTO ]            [ PERSONA ]

pero en móvil el fondo puede recortarse y dejar fuera a la persona.

Puedes ajustar la posición para conservar el área importante de la fotografía.

Tipografía en diferentes dispositivos

Un título que funciona en desktop puede ser demasiado grande en celular.

Por ejemplo:

Desktop:
NUESTRA NUEVA COLECCIÓN

puede ocupar demasiadas líneas en móvil.

Revisa:

• Font size;

• Line height;

• Letter spacing;

• Margin;

• ancho del contenedor.

No reduzcas todo automáticamente

El responsive no significa simplemente hacer todo más pequeño.

En ocasiones es mejor reorganizar.

Por ejemplo:

En lugar de reducir tres columnas hasta que cada una sea ilegible:

[1][2][3]

conviene convertirlas en:

[1]

[2]

[3]

Botones en móvil

Comprueba que los botones:

• sean suficientemente visibles;

• tengan un texto legible;

• no desborden;

• mantengan espacio alrededor;

• puedan utilizarse cómodamente.

Un botón muy pequeño puede resultar difícil de utilizar en una pantalla táctil.

Margin en responsive

Un Margin que funciona en desktop puede ser excesivo en móvil.

Por ejemplo:

Margin Left: 150px

puede empujar el contenido fuera de la pantalla.

Antes de utilizar márgenes grandes para posicionar elementos, revisa si la estructura puede resolverse mediante:

• columnas;

• alineación;

• Container;

• Grid Row.

Padding en responsive

Un Padding muy grande también puede reducir demasiado el espacio disponible.

Por ejemplo:

┌──────────────────────────────┐
│          PADDING             │
│     ┌──────────────────┐     │
│     │      TEXTO       │     │
│     └──────────────────┘     │
│          PADDING             │
└──────────────────────────────┘

En desktop puede verse bien.

En móvil, el área interior puede quedar demasiado estrecha.

Margin y Padding: revisión móvil obligatoria

Siempre que utilices valores grandes de:

• Margin Left;

• Margin Right;

• Padding Left;

• Padding Right;

comprueba especialmente la vista móvil.

Evita posicionar con Top/Left si no es necesario

Propiedades como:

• Top;

• Left;

• Right;

• Bottom;

pueden resultar útiles en diseños avanzados.

Pero si simplemente necesitas organizar dos elementos, suele ser mejor utilizar:

• Grid Row;

• columnas;

• Margin;

• Padding;

• alineaciones.

El posicionamiento manual puede ser más difícil de mantener responsive.

Navigator y responsive

Navigator no modifica el comportamiento responsive, pero es muy útil para comprender la estructura que lo produce.

Supongamos que en móvil un texto aparece fuera de lugar.

Navigator puede mostrarte:

Grid Row
├── Grid Column
│   └── Image
│
├── Paragraph
│
└── Grid Column
    └── Heading

El Paragraph está fuera de las columnas.

Quizás esperabas:

Grid Row
├── Grid Column
│   └── Image
│
└── Grid Column
    ├── Heading
    └── Paragraph

Corregir la jerarquía puede resolver el problema responsive sin necesidad de CSS.

Primero estructura, después CSS

Cuando algo no se adapta correctamente, recomendamos revisar en este orden:

1. estructura;

2. Grid Row;

3. columnas;

4. tamaños;

5. Margin y Padding;

6. imágenes;

7. visibilidad;

8. CSS, solamente si sigue siendo necesario.

Muchas dificultades responsive tienen su origen en la estructura.

Ejemplo completo: sección de dos columnas

Queremos:

Desktop

[ IMAGEN ] [ TÍTULO
             TEXTO
             BOTÓN ]

Móvil

[ IMAGEN ]

[ TÍTULO ]

[ TEXTO ]

[ BOTÓN ]

Paso 1: revisa Navigator

La estructura debería ser similar a:

Section
└── Container
    └── Grid Row
        ├── Grid Column
        │   └── Image
        │
        └── Grid Column
            ├── Heading
            ├── Paragraph
            └── Button

Paso 2: configura desktop

Define las columnas con una proporción adecuada.

Por ejemplo:

6 + 6

Paso 3: configura tamaños pequeños

Haz que ambas columnas ocupen todo el ancho cuando corresponda.

Resultado:

12
12

Paso 4: cambia a vista móvil

Comprueba el orden.

Paso 5: revisa Image

Comprueba:

• ancho;

• alto;

• proporción.

Paso 6: revisa Typography

Comprueba que Heading no sea excesivamente grande.

Paso 7: revisa Margin y Padding

Reduce espacios laterales excesivos si los hubiera.

Paso 8: guarda y utiliza Ver página

Comprueba el comportamiento final.

Ejemplo completo: tres beneficios

Desktop

[ ENVÍOS ] [ CALIDAD ] [ SOPORTE ]

Tablet

Puedes mantener tres o pasar a otra distribución según el espacio.

Celular

[ ENVÍOS ]

[ CALIDAD ]

[ SOPORTE ]

No ocultes los beneficios

En este caso los tres contienen información importante.

Es preferible reorganizarlos antes que ocultarlos.

Ejemplo completo: imagen puramente decorativa

Tienes:

[ DECORACIÓN ] [ INFORMACIÓN IMPORTANTE ]

En móvil la decoración ocupa la mitad de la pantalla.

En este caso puede tener sentido configurar:

Desktop:
[ DECORACIÓN ] [ INFORMACIÓN ]

Mobile:
[ INFORMACIÓN ]

utilizando Hide based on device screen width para la imagen decorativa.

Ejemplo completo: banner alternativo

Tienes dos creatividades:

Banner desktop

Horizontal:

1920 × 600

Banner móvil

Vertical:

800 × 1000

Si las composiciones son realmente diferentes, puedes:

1. insertar ambas;

2. ocultar la de desktop en pantallas pequeñas;

3. ocultar la móvil en pantallas grandes.

Esto permite mantener una composición optimizada para cada formato.

Cuidado con el contenido duplicado

Si ambos banners incluyen:

• textos;

• botones;

• promociones;

• precios;

recuerda actualizar las dos versiones cuando cambie la información.

Por eso recomendamos esta solución únicamente cuando sea realmente necesaria.

Animaciones y responsive

Si un elemento utiliza:

Animate on scroll

comprueba también cómo se comporta en móvil.

Una animación que funciona bien en desktop puede resultar demasiado intensa en una pantalla pequeña.

También revisa los Delay cuando existen varios elementos apilados.

Hover en dispositivos táctiles

El estado:

hover

está relacionado principalmente con pasar el cursor sobre un elemento.

En dispositivos táctiles no existe exactamente la misma interacción que con un mouse.

Por eso no debes depender exclusivamente de Hover para comunicar información esencial.

Por ejemplo, no ocultes un texto importante y muéstralo únicamente al pasar el cursor.

Menús, botones y contenido interactivo

Al revisar móvil presta especial atención a:

• botones;

• enlaces;

• Tabs;

• Accordion;

• Carousel;

• Slider;

• formularios;

• contenido incrustado.

No basta con que se vean correctamente.

También deben poder utilizarse cómodamente.

Formularios en móvil

Comprueba que:

• Inputs ocupen un ancho razonable;

• los textos no queden cortados;

• los botones sean visibles;

• no aparezca desplazamiento horizontal innecesario;

• Text Area pueda utilizarse cómodamente.

Tablas en móvil

Las tablas pueden ser especialmente complejas en pantallas pequeñas.

Si una tabla contiene muchas columnas, comprueba cuidadosamente su comportamiento.

En algunos casos puede ser necesario:

• reducir contenido;

• reorganizar información;

• aplicar una solución específica mediante CSS.

Contenido incrustado

Videos, mapas, iframes y otros contenidos externos también deben comprobarse en celular.

Un iframe con un ancho rígido puede generar desplazamiento horizontal.

Si detectas este problema, revisa primero las dimensiones del componente.

Zoom del editor

El Editor de bloques permite modificar el zoom de trabajo.

Por ejemplo:

100 %

Recuerda que el Zoom no cambia el tamaño real del contenido.

Solo modifica cómo lo ves dentro del editor.

No utilices Zoom como referencia para decidir si un elemento es demasiado grande o pequeño en la Página web.

Para eso utiliza las vistas responsive.

Vista previa

La opción Vista previa puede ayudarte a comprobar el aspecto general sin determinadas herramientas del editor visibles.

Pero después de realizar cambios responsive importantes recomendamos utilizar también:

Ver página

para observar el resultado final.

Ver página

Es la comprobación más importante después de guardar.

Utilízala para revisar:

• desktop;

• tablet;

• celular;

• enlaces;

• formularios;

• animaciones;

• elementos externos;

• comportamiento real del contenido.

Si tienes acceso a varios dispositivos

Cuando sea posible, además de utilizar las vistas del editor, comprueba la Página web desde:

• un celular real;

• una tablet;

• una computadora.

Las vistas del editor son muy útiles, pero una prueba real permite verificar también la interacción.

Flujo recomendado para adaptar una sección

Utiliza este proceso:

1. Construye la estructura.

2. Configura Grid Row.

3. Define columnas para desktop.

4. Define el comportamiento de tamaños más pequeños.

5. Comprueba tablet.

6. Comprueba celular.

7. Ajusta Typography.

8. Revisa imágenes.

9. Revisa Margin y Padding.

10. Revisa Width y Height.

11. Comprueba el orden del contenido.

12. Oculta elementos solamente si es necesario.

13. Comprueba animaciones.

14. Prueba elementos interactivos.

15. Guarda Cambios.

16. Utiliza Ver página.

¿Qué hacer si aparece scroll horizontal?

Si en móvil puedes desplazar la Página web hacia la derecha cuando no debería ocurrir, algún elemento puede estar excediendo el ancho disponible.

Revisa:

• Width;

• Min Width;

• Margin Left/Right;

• imágenes;

• iframes;

• elementos posicionados;

• columnas;

• CSS personalizado.

Utiliza Navigator para localizar la estructura.

¿Qué hacer si una imagen se sale de pantalla?

Comprueba:

• Width;

• Height;

• Max Width;

• contenedor;

• Grid Column;

• CSS personalizado.

Evita mantener un ancho fijo mayor que la pantalla cuando no sea necesario.

¿Qué hacer si dos columnas quedan demasiado pequeñas?

No intentes reducir indefinidamente sus contenidos.

Considera apilarlas:

Antes:

[ TEXTO ] [ IMAGEN ]

Después:

[ TEXTO ]

[ IMAGEN ]

¿Qué hacer si hay demasiado espacio en móvil?

Revisa principalmente:

• Margin Top/Bottom;

• Padding Top/Bottom;

• Height;

• Min Height;

• elementos ocultos que puedan dejar estructuras innecesarias;

• Section y Container.

¿Qué hacer si un texto queda demasiado largo?

Puedes:

• reducir Font size moderadamente;

• revisar Line height;

• utilizar un ancho apropiado;

• reorganizar la estructura.

Evita reducir tanto la tipografía que resulte difícil de leer.

¿Qué hacer si un botón queda fuera de pantalla?

Revisa:

• Width;

• Padding Left/Right;

• Margin;

• texto demasiado largo;

• contenedor;

• columna.

Puede ser preferible permitir que el botón se adapte al ancho disponible.

Responsive y clases compartidas

Si varias tarjetas utilizan la misma Class:

.beneficio-card

una modificación responsive mediante CSS podría afectar todas.

Esto puede ser beneficioso para mantener consistencia.

Pero si solamente una tarjeta necesita un comportamiento diferente, tendrás que identificarla correctamente.

Este tema se desarrolla en el tutorial de clases, IDs y estilos vinculados.

¿Cuándo utilizar CSS responsive?

Las herramientas visuales deberían ser el primer recurso.

Utiliza CSS cuando necesites algo que el editor no permita configurar directamente.

Por ejemplo:

@media (max-width: 768px) {
    .mi-bloque {
        padding: 20px;
    }
}

Esto es una personalización avanzada.

Antes de agregar una media query manual, comprueba si puedes resolverlo mediante:

• Grid Row;

• tamaños responsive;

• Hide based on device screen width;

• Size;

• estructura.

No agregues media queries innecesarias

Demasiadas reglas responsive personalizadas pueden hacer que un bloque sea más difícil de mantener.

Una estructura bien construida reduce la necesidad de código adicional.

Buenas prácticas responsive

Recomendamos:

• diseñar pensando desde el principio en móvil;

• utilizar grillas adaptables;

• evitar anchos rígidos innecesarios;

• evitar alturas fijas cuando el contenido puede variar;

• utilizar imágenes con proporciones adecuadas;

• revisar Margin y Padding;

• mantener tamaños de texto legibles;

• asegurar suficiente espacio en botones;

• no depender de Hover para información esencial;

• ocultar únicamente contenido secundario cuando sea necesario;

• comprobar Navigator después de mover elementos;

• utilizar CSS responsive solamente cuando las herramientas visuales no sean suficientes.

Errores frecuentes

Pensar que seleccionar la vista móvil oculta contenido en desktop

Las vistas solo sirven para previsualizar.

Ocultar elementos para resolver una grilla mal configurada

Primero adapta las columnas.

Utilizar Width fijo demasiado grande

Puede provocar desbordamiento.

Utilizar Height fijo en tarjetas con mucho texto

Puede recortar contenido.

Aplicar Margin Left grande para centrar

Utiliza primero las herramientas de alineación y estructura.

No revisar Background Image en móvil

Las fotografías pueden recortarse de manera diferente.

Depender de Hover para mostrar información

Los dispositivos táctiles funcionan de otra manera.

Crear versiones desktop y móvil de cada sección

Solo hazlo cuando realmente no pueda resolverse con una estructura responsive.

Revisar únicamente la Home

Los bloques de Productos, Blog, Servicios, Contacto y secciones personalizadas también deben comprobarse.

No probar el resultado después de guardar

Utiliza Ver página.

Tabla rápida de referencia

En resumen

El diseño responsive en Waclis se basa en permitir que una misma estructura se adapte a diferentes tamaños de pantalla.

Las principales herramientas son:

Vistas de dispositivo

Sirven para previsualizar el contenido.

Grid Row y columnas

Permiten reorganizar la estructura según el ancho disponible.

Size

Permite controlar Width, Height, Min y Max.

Margin y Padding

Permiten adaptar los espacios.

Hide based on device screen width

Permite ocultar realmente determinados elementos según el dispositivo.

La regla general es:

Primero adapta. Oculta solamente cuando sea necesario.

Una buena estructura responsive debería mantener el contenido importante accesible independientemente del dispositivo.

Antes de guardar, revisa siempre:

computadora → tablet → celular

y finalmente utiliza Ver página para comprobar el resultado real.