Recursos y herramientas web
Una tarjeta se sale de la pantalla. Pedir a la IA que «arregle el responsive» puede generar cambios en toda la página. Inspeccionar primero permite formular una petición mucho más precisa.
DevTools son las herramientas de desarrollo del navegador. En este recorrido usaremos el panel de elementos de Chrome o Edge para observar una demo propia. No necesitas modificar una web publicada ni introducir código en la consola.
El objetivo es identificar qué controla el ancho de una tarjeta, comparar margen y relleno y comprobar una corrección. Si estas palabras son nuevas, puedes consultar las bases de HTML y CSS.
Preparar una demo que puedas cambiar
Imagina un taller ficticio que presenta sus piezas de cerámica. La tarjeta tiene un título y una descripción. El siguiente documento es completo: cópialo en un editor de texto plano, guárdalo como demo.html y ábrelo en el navegador. Comprueba que el archivo no termine en .txt.
<!doctype html>
<html lang="es">
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Prueba de una tarjeta</title>
<style>
body {
margin: 24px;
color: #2b2b2b;
background: #faf9f7;
font: 18px/1.5 Arial, sans-serif;
}
.pieza {
width: 360px;
padding: 24px;
border: 2px solid #5d0606;
background: white;
}
.pieza h1 { font-size: 28px; }
</style>
<article class="pieza">
<h1>Cuenco de sobremesa</h1>
<p>Una pieza de cerámica realizada
por encargo, con acabado mate.</p>
</article>
</html>Es una demostración mínima. No incluye navegación, consultas ni funciones de tienda.
Localizar la regla antes de cambiarla
Haz clic con el botón derecho sobre la tarjeta y elige Inspeccionar. En Elements o Elementos, selecciona el article con la clase pieza. Styles o Estilos muestra las reglas; Computed o Calculado permite consultar valores efectivos. Los nombres pueden variar con el idioma y la versión.
Busca width, padding y border. En el diagrama de caja, distingue el espacio interior del borde del margen exterior. Si aparece un valor tachado en Estilos, otra declaración puede estar ganando; confirma el resultado en Calculado.
La documentación de Chrome DevTools sobre CSS explica estos paneles. Aquí los usamos para responder una pregunta concreta: ¿qué hace que esta tarjeta ocupe más de 360 px?
Esquema del mismo contenido antes y después de ajustar la caja. Las medidas corresponden a la demo local. Toca para ampliar.
Comparar una medida declarada con la caja real
En esta demo se usa inicialmente content-box, el modelo predeterminado. Los 360 px corresponden al contenido. Al añadir 48 px de relleno y 4 px de borde, la caja ocupa 412 px. Los márgenes de la página necesitan espacio adicional.
Ahora añade box-sizing: border-box en la regla .pieza del panel Estilos. Con width: 360px, esos 360 px incluyen relleno y borde. El contenido dispone de menos ancho; el texto puede cambiar de línea.
MDN desarrolla esta distinción en el modelo de caja. No confundas el ancho declarado con el espacio total que necesita la composición.
Mini tutorial: corregir el desbordamiento
En la regla de la tarjeta, conserva el relleno y el borde. Sustituye la anchura fija por estas tres declaraciones:
box-sizing: border-box;
width: 100%;
max-width: 360px;Estrecha la ventana o utiliza el modo de dispositivos del navegador. Puedes probar 390 px y 320 px de viewport. En esta demo, el margen lateral de 24 px deja aproximadamente 342 px y 272 px para la tarjeta, sin contar el posible espacio de la barra de desplazamiento.
El resultado esperado es una tarjeta que aprovecha el ancho disponible hasta un máximo de 360 px. El texto debe seguir dentro del borde. Comprueba también el ancho intermedio; cambiar de línea no es un fallo.
Guardar el cambio donde corresponde
Los cambios corrientes hechos en Estilos son temporales y no publican nada. Si no usas funciones de persistencia como Overrides, recargar recupera el archivo original.
Tras comprobar la prueba, incorpora las tres declaraciones a tu archivo demo.html, guarda y recarga. En un CMS habría que cambiar el estilo en su origen y verificar la página publicada. Una edición temporal del navegador no actualiza Elementor.
Comprobar que has entendido la decisión
Alarga el título y añade otra frase a la descripción. La tarjeta debería crecer en altura sin recortar el texto. Si falla, anota la anchura probada y la regla implicada.
Una petición útil a la IA sería: «Esta tarjeta usa 360 px de ancho más relleno y borde. Quiero limitar su caja a 360 px y permitir que reduzca su ancho dentro del contenedor. Conserva el contenido y explica el cambio».
Has terminado cuando puedes explicar qué mediste, qué cambiaste y por qué el resultado funciona. Para continuar, revisa qué decisiones cambian al diseñar para móvil.
Para comparar cómo se reparten varias tarjetas, continúa con Flexbox y Grid.
Inspeccionar convierte una impresión en una observación que se puede comprobar.
