Why Your Website Shifts Left and Right on Mobile – And How to Fix It (Divi 5 Guide)

If your website shifts left and right on mobile devices, you're not alone. This is a common issue in Divi 5 and other modern responsive layouts, and it can negatively impact user experience and SEO.

Here’s exactly what causes it—and how to fix it properly without breaking your layout.

What Causes the Layout Shift?

The main cause is the vertical scrollbar appearing and disappearing.

• Desktop → shorter page → no scrollbar
• Mobile → stacked content → scrollbar appears
• Scrollbar width (~15–17px) shifts the layout

This creates a visible left/right “jump”.

Common Divi 5 Causes

• Flex rows that don’t wrap correctly
• Carousels and sliders
• Buttons with large padding
• Background video sections
• Fixed-width elements

Main Fix (Scrollbar Stability)

Add this CSS to your page or global settings:

/* Fix layout shift caused by scrollbar */
html {
    scrollbar-gutter: stable both-edges;
    overflow-y: scroll;
}

What it does:

• Reserves space for the scrollbar
• Keeps layout centered
• Stops horizontal jumping

Mobile Overflow Fix

@media all and (max-width: 980px) {
    html, body {
        overflow-x: hidden !important;
    }

    body {
        position: relative;
    }
}

⚠️ What NOT to Do

.et_pb_row, .et_pb_section {
    overflow-x: hidden;
}

This often causes:

• Cut-off headings
• Hidden buttons
• Broken list items

Safe Divi Fix (Recommended)

@media all and (max-width: 980px) {

    .et_pb_row, .et_pb_section {
        overflow-x: hidden;
    }

    h1, h2, h3, h4, h5, h6,
    li,
    .et_pb_text,
    .et_pb_button_wrapper {
        overflow-x: visible !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
}

How to Debug the Issue

1. Open Chrome DevTools (F12)
2. Enable mobile view
3. Resize screen width
4. Look for horizontal scrolling
5. Inspect elements near the edge

Best Practices

• Use % widths instead of fixed pixels
• Check mobile view in Divi Builder
• Avoid large padding on buttons
• Test on real devices

Final Result

• No more layout shifting
• No horizontal scroll
• No cut-off content
• Smooth mobile UX

Need Help Fixing This?