Weird behavior, elements move when slider scrolls
Today i got the following site from another designer, he makes the frontend, and i add the functionality to all of the websites.
There is a weird issue going on and it's happening only in Google Chrome, i have tried a lot of things but i cannot find the cause of it.
The website is made using bootstrap 3
Here is the link to the site and the section that is being affected.
Go to site
What's happening is that when the slider with the images above moves an element (right now is bxslider plugin but it was before Bootstrap own slider, and even caroufredsel, same issue) the images on the container below, and others move a bit from side to side.
I have no idea what is causing it, I wonder if any of you guys can help me.
Somehow i managed to track the issue, probably something related to the bxslider, (since it's the only control on which this is happening) so i'll answer here for future references and if someone else runs on the same thing.
What was causing the movement on the images below was the boostrap class
.block when added the atribute
margin:0 auto; or
text-align:center to the images within the parent container inside block
Removed that and the problem is gone.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here