My website scrolls horizontally on mobile, how can I fix this?

Why does your site scroll horizontally on mobile?

Key points • Horizontal scrolling is caused by an element that is too wide for the screen • A single misconfigured block can break the entire mobile layout • A few adjustments are all it takes to restore smooth and efficient navigation

Horizontal scrolling on mobile is a common problem, but fortunately very easy to fix. It occurs when an element extends beyond the screen width—a button, an image, an incorrectly sized section, or excessive padding. This detracts from the user experience and gives an unprofessional impression, especially for a hotel website where usability plays a key role in conversion.

To begin, open your page in the Designer and select the Mobile view. Scroll to the right: as soon as the white area appears, you know that an element is overflowing. The goal is to identify the element responsible for the overflow.

The most frequent causes are:

1. An image or video that is too wide

• Ensure your images are set to 100% width. • Avoid fixed widths (e.g., 500px) on mobile. • Use “Cover” instead of “Contain” if you have a poorly handled background.

2. A button or block with excessive padding

A button with too much horizontal padding can extend beyond its container. Solution: • Reduce the padding on mobile devices. • Use relative units (%, vw) instead of fixed pixels.

3. An unsuitable column or grid

Grids and columns may overflow if: • the minimum width (min-width) is too high • negative margins are used • columns do not stack correctly. Check each column and switch to single column if necessary.

4. Text that is too long in a container that is too small

Long words (e.g., email, URL, room name without spaces) can cause an overflow. Solution: add a `break-word` attribute in your Custom Code or reduce the size/text of the container.

5. An interaction or animation that moves an element out of its container

The "move" animations can push a block off the page. Check your interactions if the problem only occurs when scrolling.

💡 Tip: Use the browser's built-in inspector (Chrome mobile simulation). Click on each element to see if it extends beyond .w-100 or the viewport.

How to diagnose quickly

Use the following method:

1. Activate Mobile View
2. Select the main structure (Body)
3. Switch to Outline mode (icon in the top right corner)
4. Open each section one by one.
5. Keep an eye out for red areas or elements that extend beyond the blue frames.

The protruding element is the one that needs correcting.

Quick solutions depending on the situation

• Set all containers to max-width: 100% • Avoid “Fixed” width values; use “Auto” or “Stretch” • Reduce horizontal padding on mobile (often the primary cause) • Use overflow: hidden only on decorative sections (never on the entire page) • Reduce image size or aspect ratio • Reorganize columns into a stack • Check interactions that move elements

Conclusion

Horizontal scrolling on mobile devices is usually caused by a single element that's too wide. By inspecting your page section by section, adjusting widths, padding, and images, you can restore smooth, high-quality navigation—perfect for a hotel website.