Tutoriales
Claude Opus 5.5: repara cuadrículas de productos que se desbordan
Pide a Claude Opus 5.5 que localice la pista o el elemento que supera el ancho disponible antes de cambiar los puntos de ruptura.
Hazlo con Panelly
De la inspiración al anuncio de tu producto
Empieza con una imagen y una idea. Crea un anuncio de cuatro viñetas, un conjunto de materiales o un vídeo con Panelly.
Crear con Panelly Edita la propuesta antes de generar.
Pide a Claude Opus 5.5 que localice la pista o el elemento que supera el ancho disponible antes de cambiar los puntos de ruptura. Un código largo puede imponer un mínimo automático mayor que la pantalla incluso con una columna 1fr. Entrega el HTML real, los estilos calculados y las medidas del contenedor; una captura no basta para identificar ese mínimo.
Separa tres problemas de ancho
| Observación | Primera comprobación | Reparación acotada |
|---|---|---|
| La columna flexible crece por una cadena larga | Mínimo de pista y elemento | Considerar minmax(0, 1fr) y min-width: 0 |
| La imagen supera una tarjeta de ancho correcto | Ancho intrínseco y restricciones | Limitar la imagen conservando su proporción |
| El contenido necesario no cabe en dos columnas | Barra lateral, separación y espacio | Pasar a una columna según el contenido |
La referencia minmax de MDN distingue el mínimo automático del mínimo cero. Reducir una pista no hace que su contenido se ajuste o reduzca automáticamente. Corrige tanto la pista como el elemento que desborda; no ocultes todo el desbordamiento de la página.
Calcula el espacio antes de proponer CSS
En este diseño hipotético, el ancho interior es 960 px, la barra lateral ocupa 240 px y la separación 24 px. Quedan 696 px para el área flexible. Con una pantalla de 390 px y 16 px de relleno a cada lado, quedan 358 px. Mantener la barra y separación dejaría solo 94 px para productos. Hace falta cambiar la distribución aunque el navegador pueda encoger la pista.
La aritmética se calculó localmente; no se probó una reparación de Opus ni una cuadrícula de producción. Una regla candidata para escritorio es grid-template-columns: 240px minmax(0, 1fr), con min-width: 0 en la región de productos. Permite ajustar los textos largos y conserva la copia de códigos. Una tabla comparativa puede necesitar desplazamiento horizontal propio en vez de palabras partidas. Evita overflow-x: hidden en toda la página: puede esconder el problema y recortar contenido útil.
Prompt de diagnóstico para copiar
Revisa esta cuadrícula con el HTML, CSS, estilos calculados y capturas adjuntos. El ancho interior de escritorio es 960 px, la barra lateral 240 px y la separación 24 px. La pantalla móvil mide 390 px y tiene 16 px de relleno por lado. Encuentra el primer elemento cuyo scrollWidth supere clientWidth. Rastrea su pista y las reglas de ancho mínimo. Separa el tamaño de pista, el contenido indivisible y el tamaño intrínseco de imagen. Propón el menor cambio y un punto justificado para pasar a una columna. Conserva orden, nombres visibles, copia de códigos, contornos de foco y proporciones. Devuelve selectores responsables, cálculo de ancho antes y después, parche mínimo y pruebas a 390 y 1280 px. Marca lo que no puedas establecer con las evidencias y no afirmes haber ejecutado pruebas de navegador que no hiciste.La referencia del modelo es la guía oficial de Opus. Es un ejemplo editorial, no un resultado medido del modelo. Una pregunta comunitaria de 2018 muestra la antigua confusión sobre mínimos, no el volumen actual de demanda.
Verifica la distribución reparada
Prueba un SKU largo sin espacios, un nombre traducido, una imagen ausente y el foco del teclado. Compara el ancho desplazable del documento con la pantalla y revisa aparte los desplazamientos locales intencionados. Repite con texto ampliado y sin barra lateral. Una captura correcta a un solo ancho no valida todo el intervalo.
Si el problema es elegir el archivo de imagen, consulta la auditoría de imágenes adaptables. Cuando el diseño admita la forma del producto, crea materiales de campaña en Panelly Studio. Esto no implica que Panelly integre Opus.
Preguntas antes de publicar
¿Toda cuadrícula necesita un mínimo cero?
No. Elígelo cuando la pista deba encogerse y define qué hace su contenido. Un área comparativa deliberadamente fija tiene otras necesidades.
¿Se puede truncar el nombre del producto?
Solo si la interfaz permite consultar el nombre completo cuando haga falta. Corrige la restricción de ancho antes de decidir cómo truncar.
¿Hay que regenerar la imagen?
Normalmente no por un defecto de tamaño en CSS. Examina primero el archivo servido y su contenedor; cambia el recurso si la composición resulta inadecuada.
