Probleme modification de gabarit bootsrap, vue smartphone

Bonjour bonjour,

Je suis sur un site avec une base bootstrap, je charge mes styles dans un fichier séparé, et j’ai un problème de gabarit en smartphone.

J’ai 2 contraintes principales qui sont source de mon bug :
1. Je dois respecter des margin/padding sur les éléments « container » et « row » de 10px au lieu 15px sur le gabarit standard. parce que ma maquette a des tuiles fines.
2. lorsque l’écran est étroit, je veux que mes blocs verts & blocs images soient collés au bord de l’écran (je fais donc sauter le padding).

Ca semble ok, sauf que j’ai un écart d’une 15aine de pixel sur la droite, et ça ça va pas du tout
- sur smartphone lorsque je scroll j’ai comme un effet qu’un scroll latéral de 15px).
- sur desktop on peut l’observer aussi avec un clic sur le bouton du milieu de la souris et déplacer vers la droite.

http://fr.brains-world.com/panda/bug.jpg
La page : http://fr.brains-world.com/panda/pages/index.html
les fichiers au cas où : http://fr.brains-world.com/panda/panda.zip


Mon css qui semble poser pb : (quand je le supprime pas de bug, mais pas de blocs collés au bords de l’écran smartphone)

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  padding-right: 10px;
  padding-left:  10px;
}
.container{
    padding-left: 10px;
    padding-right:10px;
}
.container > .row {
  margin-right: -10px;
  margin-left:  -10px;
}
@media (min-width: 768px){
  .container {
   width: inherit; 
  }
}/* @media min-width: 768px */
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}/* @media min-width: 992px */
@media (max-width: 992px) {
  .container {
   padding-left: 0;
   padding-right: 0;
  }
}/* @media max-width: 992px */

Voilà, je m’arrache les cheveux depuis quelques jours sur ce bug, je dois ravaler ma fierté et avouer mon échec à le corriger…
Je me tourne donc vers vous, quelqu’un saurait-il m’aider ?
Par avance, ma reconnaissance éternelle !

Bonjour,

Remplacer overflow: auto; par overflow: hidden,

theme.css ligne 50:

#main {
    [b]overflow: hidden;[/b]
    padding-bottom: 106px;
}

Ohweb mon héro !

Mille merci l'ami.
c'est toujours aussi déconcertant de voir qu'on peut passer des heures à tiquer sur un problème qui se résume à un tout petit mot à changer...

Et en plus ça ne me fait pas planter mon système qui m'assurait que le footer restait coller en bas de page même si la page était courte en hauteur. vu que ma mon id#main servait à ça.

Donc si je comprends bien, en petite résolution, il y avait qlq chose qui débordait de mon gabarit, et maintenant, on ne sait tjs pas ce qui déborde mais on le cache et ça semble suffire, c'est bien ça ?

Comme quoi j'avais besoin d'un oeil neuf et l'approche qui va avec.
Encore une fois merci de m'enlever cette douloureuse épine.
Happy