Ajustar los estilos finales de un proyecto web es lo que separa una interfaz funcional de una interfaz que se siente terminada. Aquí aprendes a refinar botones, tipografías y comportamiento responsive de un mapa interactivo usando CSS, media queries y la metaetiqueta viewport, todo aplicado al cierre de la sección de mapa de un juego en Canvas.

Cómo ajustar estilos de botones y jerarquía tipográfica en CSS

El primer pulido visual empieza por reutilizar estilos y corregir la jerarquía de títulos. La idea es que el contenedor del mapa se sienta consistente con el resto de la interfaz.

Para los botones de navegación del mapa, copias los estilos del botón de la mascota y los aplicas al identificador ver mapa. Esto evita duplicar reglas y mantiene una estética uniforme.

En el HTML, el título original era un h1 que cerraba con la etiqueta incorrecta. Lo conviertes en h2 y el texto inferior pasa a la clase subtítulo. Así el peso visual baja y la lectura se ordena.

¿Por qué cambiar un h1 por un h2 en una sección interna? Porque el h1 se reserva para el título principal de la página. Usar varios h1 confunde a los motores de búsqueda y rompe la jerarquía semántica del documento.

Cómo agrupar botones con un div para controlar su layout

El objetivo era dejar un botón arriba y los otros tres distribuidos abajo en orden lógico: arriba, izquierda, abajo y derecha. Para lograrlo envuelves los tres botones inferiores dentro de un div, cortas la etiqueta de cierre y la pegas al final del grupo.

Luego reduces el tamaño de los botones a 80 píxeles y ajustas el margin a 10 píxeles arriba y abajo, con cero a los lados. Ese pequeño cambio elimina los espacios excesivos entre botones y mejora la legibilidad del control direccional.

Cómo usar media queries para hacer un layout responsive

Cuando la pantalla baja de cierto ancho, los botones se desbordan y rompen la composición. La solución es agregar un media query que cambie la dirección del flexbox.

Dentro del nuevo media query aplicas estas reglas al contenedor ver mapa:

• display: flex para activar el modelo flexible.
• flex-direction: column para apilar los botones verticalmente.
• align-items: center para mantenerlos siempre centrados.

Un detalle importante: el selector debe escribirse con guion, no con igual. Un error de sintaxis como ese impide que las reglas se apliquen y suele pasar desapercibido si no revisas la consola.

El media query superior, que afecta a las tarjetas de personajes, se sube hasta 560 píxeles porque antes de ese ancho las tarjetas se cortaban en la pantalla de inicio. El nuevo media query de los botones se activa desde 300 píxeles.

¿Qué hace flex-direction column en un media query? Cambia la disposición de los hijos de un contenedor flex de horizontal a vertical, ideal para pantallas estrechas donde no caben elementos en fila.

Por qué necesitas la metaetiqueta viewport en HTML

Al probar el sitio con el inspector del navegador en modo dispositivo, los media queries no se aplicaban. La razón es que faltaba la metaetiqueta viewport en el HTML.

Esta etiqueta le indica al navegador móvil cómo escalar la página. Sin ella, el dispositivo asume un ancho de escritorio y tus reglas responsive quedan inactivas. La declaración estándar se coloca dentro del bloque de metas al inicio del documento.

Una vez agregada, puedes simular dispositivos como iPhone XR o iPad desde las herramientas de desarrollador y verificar que el mapa se adapta correctamente. En pantallas pequeñas los botones se apilan en columna; en tabletas el mapa se ve compacto pero proporcional.

Cómo depurar errores de CSS desde el inspector del navegador

Dos errores típicos aparecieron durante el ajuste:

• Escribir margin con doble N, lo cual invalida la propiedad.
• Usar el signo igual en lugar de guion en un selector compuesto.

Ambos se detectan rápido si revisas el panel de estilos del inspector, donde las reglas inválidas aparecen tachadas o ignoradas. Acostumbrarte a leer el código en voz alta antes de guardar también ayuda a cazar estos detalles.

¿Cómo pruebo un sitio como si fuera móvil sin tener el dispositivo? En el inspector del navegador hay un botón de modo dispositivo que simula distintos teléfonos y tabletas. Funciona solo si tu HTML incluye la metaetiqueta viewport.

Con estos ajustes cierras la sección del mapa con botones bien dimensionados, jerarquía tipográfica correcta y un comportamiento responsive que funciona desde 300 píxeles hasta pantallas grandes. Ya sabes mover moquepones en Canvas, iniciar secuencias de ataque y dejar todo con un acabado visual cuidado.

¿Qué otros ajustes de estilo aplicarías para llevar el mapa al siguiente nivel? Cuéntalo en los comentarios.