CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
adam g
adam g

Reputation: 275

Page moving left and right while in mobile browser

I'm working on a project and I'm running into a big issue. I'm using bootstrap and I need the page to be full width. I'm using container-fluid. Everything works fine on desktop but on mobile the page moves side to side as if the container is bigger than the display. There is no scroll bar but you can move it around with your finger, it only moves a little bit but it is annoying. I don't even know where to check anymore. Its a site built on the Sparkpay CMS and it uses bootstrap 3. I'm not even sure how to refer to the problem, I've been looking for solutions online but I'm not finding a lot of posts similar to my situation.

The link is: https://store55652.mysparkpay.com/

I know I'm supposed to post code, but I really am at a loss here. I've scoured through all my CSS(there are a few files) I cant figure it out. Any help here would be greatly appreciated.

Upvotes: 17

Views: 51334

Answers (7)

Michael L
Michael L

Reputation: 55

To figure out what was causing this, I put my desktop browser in developer view, chose mobile view and selected an iPhone, then "swiped" so my content was off-center. I could then hover the inspector arrow tool over the empty-looking margin until I found the culprit.

In my case, it was an issue with the mobile menu not collapsing perfectly on narrow screens.

Upvotes: 2

Yanick
Yanick

Reputation: 11

I just had the same issue and I wanna emphasize what @larrylampco said once more:

There must be some elements overlapping on your actual pagesize which extends the pagesize to where this far you are able to scroll.

For me it was a tooltip I added for desktop screens. Forgot to remove it for mobile. The tooltip wasn't visible when loading the page on mobile, but it was there. That's why the page extended.

Upvotes: 1

Zaeb_stack
Zaeb_stack

Reputation: 1

It's all about margin, find out which main element has margin by using chrome devtool and make it margin:0; or try this body { margin:0;}

Upvotes: 0

pankajmalviya
pankajmalviya

Reputation: 1

Keep the position of the container(e.g. div, nav, etc.) static. I had the same problem. Changing the container position in which the problem persist solved my issue.

Upvotes: 0

nyi
nyi

Reputation: 1

overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;

Just Copy this code in body and text. I will help you

Upvotes: -1

Vlad Alivanov
Vlad Alivanov

Reputation: 1234

This works for me

html, body {width: auto!important; overflow-x: hidden!important}

Upvotes: 42

copia li
copia li

Reputation: 318

Seems even on desktop you can scroll left/right.

The simple way to fix is add:

html {
  overflow-x: hidden;
}

But actually you should fix the overflow elements. For example you set padding left/right 0 for container-fluid, then you should set margin left/right to 0 for row as well(now is -15px). Otherwise it will out of the container.

Upvotes: 9

Related Questions