How to Remove Horizontal Scroll on Mobile

Horizontal scroll on a phone usually comes from one element wider than the viewport. In the preview at editor.clincoo.buzz narrow the panel to a phone width, then scroll sideways to confirm the symptom.

Find what is overflowing

In the console, inspect elements and compare scrollWidth with clientWidth. The node whose scrollWidth is larger is the suspect. It is often an image without max-width, a table, or a long word with no break.

Cap the width

img, video, and iframe need max-width: 100% and height: auto. A grid or flex child that must shrink needs min-width: 0. Large padding plus width: 100% without border-box also pushes the page out.

Retest before deploy

After the fix, left-right scroll should be gone at 360 pixels. Then deploy from app.clincoo.buzz. Do not hide the symptom with overflow-x: hidden on body before you find the cause.