Solved

Mobile White Space/Width

  • 13 July 2016
  • 3 replies
  • 232 views
Dave_Reinke

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

icon

Best answer by Justin 13 July 2016, 21:42

View original

3 replies

J

:unbounce: UPDATE

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

InvesTechs

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

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