Haz que tu diseño funcione en teléfonos.

Tus páginas se adaptan solas a teléfonos y tabletas: las columnas quedan lado a lado en pantallas anchas y se apilan en las pequeñas. Esta página muestra cómo tomar el control. Fijas un diseño de columnas por tamaño de pantalla, inviertes el orden en pantallas anchas y muestras elementos solo en algunos dispositivos. El ejemplo convierte una fila de cuatro columnas en dos por dos en tabletas.

El vídeo oculta una foto en teléfonos, y luego estrecha la ventana para mostrar cómo desaparece.

Antes de empezar

• Una fila con cuatro columnas iguales en la página; consulta Filas y columnas.

Elige un diseño por tamaño de pantalla

1. Pasa sobre la fila y haz clic en el icono de cuadrícula en su barra de controles. El diálogo de diseño se abre con un panel Medium devices (≥ 768px).
2. Haz clic en Add screen size. Un segundo panel se abre, fijado en Extra small (< 576px).
3. En el desplegable de ese panel, elige Small devices (≥ 576px).
4. Haz clic en Custom Layout, escribe 1/2 + 1/2 + 1/2 + 1/2 y haz clic en Save.
5. Haz clic en Save en la barra.

Cuatro mitades conservan las cuatro columnas y ponen dos en cada línea. La baldosa con dos columnas iguales cortaría la fila a dos columnas en cada tamaño de pantalla.

Lo que ves

En un escritorio las cuatro columnas aún están en una línea. Estrecha la ventana del navegador por debajo de 768 píxeles y se agrupan de dos en dos. Bajo 576 píxeles se apilan, una por línea, en el orden que ves en el editor.

Un diseño se aplica desde su tamaño de pantalla hacia arriba, hasta que un tamaño mayor tiene su propio diseño. Cada fila nueva empieza con un diseño para Medium devices (≥ 768px), así que sus columnas se apilan en teléfonos y tabletas pequeñas. Remove screen size en un panel elimina ese diseño de nuevo.

Invierte el orden en pantallas anchas

Abre el menú More de la fila, elige Settings y activa Mirror row. Desde 768 píxeles hacia arriba, las columnas se muestran en orden inverso; en pantallas más pequeñas se apilan en el orden del editor.

Úsalo para filas alternas de imagen y texto. Pon la imagen primera en el editor, para que los teléfonos la muestren sobre el texto, e invierte cada segunda fila para que los escritorios muestren la imagen a la derecha.

Muestra u oculta un elemento por tamaño de pantalla

1. Abre el menú More del elemento y elige Settings.
2. En HTML classes, escoge un chip del grupo Responsive Visibility, por ejemplo Hidden on extra small devices, phones (<576px).
3. Haz clic en Save.

Cada chip Hidden on oculta el elemento en un solo tamaño de pantalla. Cada chip Visible on lo muestra en ese tamaño y lo oculta en los demás.

Tamaños de pantalla

Un elemento Positioned layers tiene su propio interruptor Responsive, desactivado por defecto. Actívalo para escalar la altura del lienzo y su texto con el ancho de ventana, para que la composición conserve sus proporciones.

Si no ves el cambio

• Las columnas se siguen apilando en una tableta. La fila no tiene diseño para ese tamaño de pantalla, así que las columnas se apilan bajo 768 píxeles. Abre el icono de cuadrícula de la fila, haz clic en Add screen size y elige Small devices (≥ 576px).
• Un elemento desapareció en todos los tamaños de pantalla. Lleva dos chips Visible on, y cada uno lo oculta donde el otro lo muestra. Quédate con uno, o usa chips Hidden on, uno por tamaño que ocultar.
• Mirror row no hace nada en un teléfono. Mirror row funciona desde 768 píxeles hacia arriba. Para cambiar el orden en teléfonos, mueve las columnas en el editor.

¿Qué sigue?

• Filas y columnas: crea las filas que haces adaptables aquí.
• Edita una página en tu teléfono o tableta: comprueba y corrige páginas en una pantalla pequeña.
• Ejecuta una sección de borde a borde: decide qué ancho tiene tu contenido.