GeneratePress

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

Similar Posts

61 Comments

  6. 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.

    Reply

  10. This isn’t the first time you’ve had a fix for a WP issue I’m having. Pure champion. Thank you.

    Reply

  11. 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!

    Reply

  18. 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.

    Reply

    1. 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

      Reply

  19. 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?

    Reply

  20. 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!!!

    Reply

    1. 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

      Reply

  21. 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!

    Reply

  22. 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!

    Reply

  23. 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

    Reply

  25. I am using Elementor Hello theme. The code works, but it also blocks vertical scrolling. Is there a way to only block the horizontal wiggle with the following slider?
    https://www.sentielwatches.com/product/insigne-royal/
    Best wishes!

    Reply

      1. Hi,
        were you able to fix this?
        With the css code from this page there is a strange behavior: when scrolling down I have to swipe up twice to actually scroll up.
        It’s like I have a window/viewport inside a window/viewport and first swipe moves the inner window/viewport and second works as it should be during the first time 🤷‍♂️

        Reply

  27. This worked like a charm on my site too, using the Typology theme and Elementor. Maybe this code should be added to the core Elementor CSS
    https://github.com/elementor/elementor/issues

    Reply

Leave a Reply

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