Debug a CSS Layout With AI: Send Facts, Not Screenshots
AI is bad at guessing why your layout broke and good at reasoning over the exact values the browser computed. The trick is handing it the right ones.
To debug a CSS layout with AI, stop describing what the page looks like and paste what the browser computed instead: the element's HTML, its matching rules, and the computed values for display, width, min-width, overflow and position on the element and its parent. With those, an assistant can usually name the cause in one reply. Without them, it guesses, and a confident guess about CSS is how you end up with !important on forty lines.
Why "it overflows on mobile" gets bad answers
A layout bug is an interaction between rules the model cannot see. If you write "my card grid overflows on small screens", the assistant has to invent your stylesheet, then invent a bug in it. What comes back is a generic checklist: add box-sizing, try overflow: hidden, wrap in a container.
Those fixes hide the symptom. The element is still too wide, you just stopped it from showing. The overflow reappears the day someone adds a long word.
What the model is good at is the opposite job. Hand it real rule values and ask which one explains the symptom, and it reasons well. That is the whole routine below.
The five-step routine
Shrink the repro. Copy the broken element and its parent into a blank file, with only the CSS that touches them. If the bug vanishes, you have just learned the cause is something you removed. That alone often solves it.
Name the symptom as a measurement. "The third card is 412px wide in a 360px container" beats "it looks off". DevTools shows you the numbers on hover.
Collect the computed facts. In Chrome DevTools, select the element and open the Computed pane to see only the values that are actually applied, with Show All to include the rest. See the DevTools CSS reference.
Ask for a diagnosis before a fix. Make the assistant name the rule responsible and say how you could confirm it.
Confirm with one change. Apply the smallest edit, reload, and check the measurement from step 2.
A worked example
A pricing row has three cards in a flex container. On a narrow screen the middle card pushes past the edge of the page. The card holds a long unbroken product code.
<div class="row">
<article class="card">Starter</article>
<article class="card">Team plan code: ENTERPRISE-SEAT-PACK-ANNUAL-2026</article>
<article class="card">Pro</article>
</div>.row { display: flex; gap: 12px; }
.card { flex: 1; padding: 16px; }The prompt:
Layout bug. Diagnose first, do not fix yet.
Symptom: at a 360px viewport, .card:nth-child(2) measures 412px wide
and the page scrolls sideways.
HTML and CSS: [paste the snippets above]
Computed on .card:nth-child(2): display: block; flex: 1 1 0%;
min-width: auto; overflow: visible; width: 412px.
Computed on .row: display: flex; width: 360px.
Which rule explains why the card will not shrink, and how can I
confirm it in DevTools before changing anything?A good answer points at min-width: auto. MDN documents that for flex items the automatic minimum width falls back to the item's min-content size, which for an unbreakable string is the full length of the string. See MDN on min-width. The card is not being rude, it simply refuses to shrink below the width of its longest word.
The fix is one line, and it targets the cause rather than hiding it:
.card { flex: 1; padding: 16px; min-width: 0; overflow-wrap: anywhere; }min-width: 0 lets the item shrink below its content size, and overflow-wrap: anywhere lets the long code wrap. Reload, check that the card now takes roughly a third of the row, and you are done.
The usual suspects, and the check for each
Symptom | Common cause | What to read in DevTools |
|---|---|---|
Flex or grid child overflows its parent | Automatic minimum size on the child |
|
Child with | Parent has no definite height | Computed |
Sticky element never sticks | An ancestor clips or scrolls |
|
Element sits behind another despite a high |
|
|
Gap or spacing differs from the design | Margins and gaps both applied | Box model diagram, with margins highlighted |
Paste the row that matches your symptom into the prompt. It narrows the model's search before it starts.
Let DevTools do the looking
For flexbox bugs, Chrome shows a flex badge beside any element with display: flex, and clicking it draws an overlay with dotted lines showing where the items sit. There is also a visual editor for flex properties in the Styles pane. See the Chrome DevTools flexbox guide. Use the overlay to confirm what the AI told you, because a diagnosis you can see is worth more than one you trust.
Keep the assistant's hands off the rest of your CSS
Layout bugs invite sweeping rewrites. Ask for a change to the one rule involved, and say so. An agent that "tidies up" while it is in there can restyle half a file, which is a separate problem covered in stopping an AI coding agent from reformatting a whole file. If the fix does not work, return to the checks in debugging AI-generated code before asking again.
For a larger stylesheet move, such as a utility-class rewrite, converting CSS to Tailwind with AI has its own checklist. And the wider tool landscape sits in AI coding tools.
Questions people ask
Can AI fix CSS from a screenshot?
It can describe what it sees, but a screenshot hides the values that matter, such as computed widths and inherited properties. Pasting the computed styles and a minimal repro gives far better results.
Why does my flex item overflow its container?
Usually because a flex item will not shrink below its minimum content size. A long unbroken string or a wide image sets that floor. Setting min-width: 0 on the item removes it.
Should I ask AI to rewrite my whole stylesheet to fix one bug?
No. Ask for a diagnosis, then the smallest change to the rule responsible. Wide rewrites introduce new bugs and make the fix impossible to review.
How do I make a minimal reproduction?
Copy the broken element and its parent into an empty file with only the CSS that applies to them. Remove rules until the bug disappears, then put back the last one you removed.
How did this land?
About the author
Developer Advocate
Steve builds something with Swarmz every week and writes up what worked, what broke, and what he'd do differently. Tutorials and hands-on guides are his lane.
