Tutorials
Claude Opus 5.5: repair product grids that scroll sideways
Ask Claude Opus 5.5 to locate the grid track or child that exceeds its available width before changing breakpoints.
Make it with Panelly
Turn inspiration into your next product ad
Bring a product image and an idea. Create a four-panel ad, a coordinated asset set, or a video with Panelly.
Create with Panelly Edit the brief before you generate.
Ask Claude Opus 5.5 to locate the grid track or child that exceeds its available width before changing breakpoints. A long product code can force an automatic minimum wider than the screen even when a column uses 1fr. Give the model the actual HTML, computed styles and container measurements; a screenshot alone cannot identify that minimum.
Separate the three width problems
| Observation | Inspect first | Bounded repair |
|---|---|---|
| Flexible column grows around a long token | Track minimum and child's minimum width | Consider minmax(0, 1fr) and min-width: 0 |
| Image exceeds an otherwise correct card | Intrinsic image width and constraints | Constrain the image without changing its aspect ratio |
| Two columns cannot fit their intended content | Sidebar, gap and available width | Switch to a single column at a content-driven breakpoint |
MDN's minmax reference distinguishes an automatic minimum from a zero minimum. Shrinking a track does not automatically wrap or resize its contents. Fix both the containing track and the particular child that spills out; do not hide every overflow on the page.
Calculate the space before proposing CSS
In this hypothetical product layout, the grid's inner width is 960 px, the sidebar 240 px and the gap 24 px. The flexible area has 696 px. At a 390 px viewport with 16 px padding on each side, only 358 px remains. Keeping the same sidebar and gap leaves 94 px for products. That calls for a layout change, even if the browser can technically shrink the track.
The arithmetic was calculated locally; no Opus-generated repair or production grid was tested. A candidate desktop rule is grid-template-columns: 240px minmax(0, 1fr). Give the product region min-width: 0; allow long prose to wrap, and keep machine-readable codes copyable. A comparison table may need its own horizontal scrolling region instead of broken words. Avoid a page-wide overflow-x: hidden patch: it can conceal the evidence and clip useful content.
Copyable diagnosis prompt
Review this product grid using the attached HTML, CSS, computed styles and screenshots. The inner desktop width is 960 px, sidebar 240 px and gap 24 px. The mobile viewport is 390 px with 16 px padding per side. Find the first element whose scroll width exceeds its client width. Trace its grid track and minimum-width rules. Separate track sizing, unbreakable content and intrinsic image sizing. Propose the smallest change, then a justified one-column breakpoint. Keep product order, visible names, code copying, focus outlines and image proportions. Return the responsible selectors, a before/after width calculation, a minimal patch and tests at 390 and 1280 px. Mark anything you cannot establish from the supplied evidence; do not claim a browser test you did not run.The official Opus prompting guide is the model reference. This is an editorial workflow example, not a measured model result. A 2018 community question illustrates the longstanding minimum-size confusion, not current demand volume.
Verify the repaired layout
Test a long unbroken SKU, a translated name, a missing image and keyboard focus. Compare document scroll width with viewport width, then inspect intended local scrollers separately. Repeat with text zoom and the sidebar removed. A passing screenshot at one width does not establish the breakpoint works throughout the range.
For image selection rather than track sizing, use the responsive-image audit. Once the layout accepts the intended product shape, create matching campaign artwork in Panelly Studio. This does not imply Panelly includes Opus.
Questions before shipping
Should every grid use a zero minimum?
No. Choose it where the track should shrink and define how its contents behave. A deliberately fixed comparison area has different requirements.
Is cutting off the product name acceptable?
Only if the interface still provides the full name when needed. Fix the width constraint before choosing a truncation policy.
Does an image need regeneration?
Usually not for a CSS sizing defect. Inspect the served image and its container first, then change the asset only if its composition is unsuitable.
