Mobile White Space/Width


#1

I am having an issue with the mobile version of my LP.  It looks great except it is scrolling to the right revealing empty white space.  Can anyone help me identify why this is occurring?  I have checked for any elements overlapping the “Out-of-bounds” warning guides but I don’t see anything (also hidden elements).

www.get.enlightiumacademy.com/diploma-g

thanks,
Dave


#2

:unbounce: UPDATE

We now have a help article about this issue in our FAQ’s which you can find here.


#3

For those who still may be struggling with this…
When the Content Management System fails you can always override it with code.

Try this is you’re having trouble with the horizontal scroll.

Put this in your CSS

body {
  max-width: 100%;
  overflow-x: hidden;
  width: 100%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

and then put this in your header using the Javascript feature

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />

Voila! No more annoying side scroll

Edit:

I found that implementing the following snippet helps prevent x-axis scrolling on Safari.

/* Disable Horizontal on Safari */
div.lp-pom-root {
  overflow-x:hidden;
}