Skip to main content

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


:unbounce: UPDATE


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


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;

}



body {

  max-width: 100%;

  overflow-x: hidden;

  width: 100%;

  -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

}

Thank you , The above example Saved me a load of time. Thanks again.

Reply


Terms & ConditionsCookie settings