Fix for horizontal wiggle on iPhone with Elementor and GeneratePress

Get the latest from
Sniffle Valve

Sniffle Valve

Consider buying Sniffle Valve a coffee  

Book a one-on-one online training session

Note: To copy any code presented in these tutorials, hover over the code and select the Toggle RAW Code icon raw code icon

For those of you who have experienced a sort of “wiggle” on an iPhone when viewing your Elementor created pages using the GeneratePress theme, this is the fix.

The issue is not that it creates a horizontal scroll bar, but that you are able to move the page horizontally back and forth a bit.

Add this custom CSS to where you add your custom CSS (Simple CSS is my preferred location) and your Elementor created pages in GeneratePress will be rock solid.

A big thanks to Nicholas in the GP forum for this.

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;

37 thoughts on “Fix for horizontal wiggle on iPhone with Elementor and GeneratePress”

  1. Avatar

    Lyle…just this morning I had this problem on a website. I remembered that you had a fix for this…came here…found it…added your CSS…checked the site…and yeahhhh!!! It works. Thanks so much.

  2. Avatar

    Also works perfectly to fix the same bug for BeaverBuilder with Beaver Theme 1.7.3 & Beaver Themer

    Simple – effective! Thanks!

  3. Avatar

    I’m trying to use this code (I have the Hello Theme) For some reason it doesn’t work for me. When I copy past it, the first line is indicated with a red X. Can you help? Thanks.

    1. Avatar

      Hi Asaf,
      I have no experience with the Hello theme. The red X would indicate that that selector is not valid for that theme. The code provided is for the GeneratePress theme, which does work with it.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top