GeneratePress

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;
}

51 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 2.2.3.3 with Beaver Theme 1.7.3 & Beaver Themer 1.2.3.4.

    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.
      Cheers!
      Lyle

  4. Avatar

    Hi. I found this solution to the wobble and it has previously worked for me and my GeneratePress-themed site. However, switching to Standard AMP mode for posts causes them to wobble sideways again. Can this be fixed, please?

  5. Avatar

    Awwww man, this is golden. Thank you so much! It makes my site look so much more official.

    One question, when I turn my iPhone into landscape mode, there are white bars on the sides of the screen. Not a huge problem but my site is a darker site, is there any way to get rid of those bars or make them black?

    Thanks!!!

    1. Avatar

      You’re welcome, Mark 🙂
      For your question I would need a link to the site in question. I could take a quick look if you send me the link via the contact page here as I don’t care for links in the comments.
      Cheers!
      Lyle

  6. Avatar

    Looks like this post ages very well and is relevant even three years later. 🙂
    As already mentioned here in comments, works with Astra/Elementor like a dream.
    I’m a long time web designer, but this little trick never crossed my mind.
    Truly thankful for this little snippet! Much appreciated! TY!

  7. Avatar

    Worked like a charm on Hello Theme from Elementor. It was driving me crazy testing on my iphone as to why it was doing this!!! Thanks!

  8. Avatar

    This worket great, thank you. I still have the problem that all my content is “pushed” a bit to the right, everything except headder and footer which are contorlled in theme custimization. Any idea why that might be

Leave a Comment

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

Scroll to Top