Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 648
adam g Avatar asked Jun 21 '17 04:06

adam g


2 Answers

This works for me

html, body {width: auto!important; overflow-x: hidden!important} 
like image 171
Vlad Alivanov Avatar answered Nov 18 '22 02:11

Vlad Alivanov


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.

like image 6
copia li Avatar answered Nov 18 '22 02:11

copia li