Before you start
- A page where the issue can be reproduced.
- The viewport width and a screenshot or description of the overflow.
- An AI coding assistant with access to the layout files.
How to do it
- Reproduce the problem at the affected width and identify the element wider than the viewport.
- Ask the assistant to inspect fixed widths, min-width, flex/grid sizing, and unbroken text.
- Apply a scoped fix such as min-width: 0 or overflow-wrap where it fits the cause.
- Test the original page and neighboring layouts. Confirm important content is still reachable.
Before & after
.result { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }The affected layout fits the viewport while preserving readable content and intentional scrolling regions.
Use with an AI coding tool
1 Describe your change
Use your own words. You do not need a file name. The prompt asks the AI to preserve unrelated work.
We remember this choice on this device. Choosing a tool does not connect it to this website.
2 Copy your prompt
Read the complete prompt below, then copy it.
3 Paste into your AI coding tool
Open your website or app project in your AI coding tool. Paste this into its AI chat box and send it. The tool needs access to your project files to make changes.
A website address alone does not give an AI permission or access to edit it. This prompt goes into an AI chat, not a regular terminal window.
4 Check the result
Check widths around 320px, 390px, and 768px where feasible, including long content.
Open your project preview and try the change. Review what changed before publishing. If it is wrong, use your tool’s undo or restore your saved project version.
If the result is not what you expected
A global overflow-x: hidden seems to fix it
It may only crop the offending content. Verify the root cause.
A data table became unreadable
A table may need its own horizontal scrolling wrapper instead of forced shrinking.
Undo the change
Revert only the sizing or wrapping change that was made. Keep a record of the original reproduction width.
References & testing
The examples above explain the expected behavior; they are not a claim that this prompt has been tested in every framework or AI model. Test the proposed change in your actual project before publishing.