THE GITHTML FIELD GUIDE
Find the element making an HTML document scroll sideways
Identify which element extends beyond the reading width before changing the entire page. Common causes include fixed-width wrappers, large minimum widths, unbroken strings, and wide preformatted content. Repair the offending element or contain its scrolling locally. Hiding overflow on the body can conceal information without fixing the underlying layout.
Narrow the search
Begin with the section where sideways movement becomes obvious. Inspect large images, tables, code blocks, and rows of cards. If every section is too wide, examine the outer wrapper and viewport metadata first. A page can have correct viewport metadata and still overflow because a descendant insists on a larger minimum width.
In a local browser inspector, compare element boundaries with the viewport. Temporarily disabling one suspect rule can establish whether it causes the problem. Keep those experiments separate from the published artifact until you understand the cause. Randomly reducing font sizes or adding maximum widths everywhere can create new problems while leaving the original constraint intact.
Match the repair to the content
An image usually should scale proportionally within its container. A code block may need local horizontal scrolling to preserve exact line structure. A long URL or identifier may need an overflow-wrap rule. A table may require fewer columns or a scroll wrapper. These are different content problems, so a single global clipping rule is rarely a good solution.
Flex and grid layouts can retain an item's intrinsic width in surprising ways. When a child refuses to shrink, inspect its minimum sizing and the track definition. For a simple reading document, removing an unnecessary multi-column layout may be clearer than adding increasingly complicated constraints. Preserve the source order and semantic structure while simplifying presentation.
Verify that nothing was merely hidden
After the change, reach the rightmost content in every wide example. Confirm that commands, values, and labels have not been cut off. Test portrait orientation and enlarged text, since both increase pressure on the layout. Keep the correction in the authoring source so the next export does not reintroduce the same width rule.
- Check the viewport declaration and outer container width.
- Inspect the longest unbroken text and widest media element.
- Remove unjustified fixed or minimum widths.
- Give truly wide code or tables a local overflow container.
- Confirm that ordinary paragraphs no longer move sideways.
- Read the last column and final characters of affected content to detect accidental clipping.
Sources and further reading
AI-assisted writing with source-linked guidance and illustrative examples. Read our editorial approach or report a correction.