I am facing an issue where I want to align different divs with background images next to each other without any spacing, similar to this:
https://jsfiddle.net/71qpceqb/
Currently, I am using Bootstrap's row and col to achieve this layout.
In the provided fiddle, everything seems to work perfectly with the copied CSS code! However, when I implement it in my actual project (temporary htaccess removed), there are strange jumps and incorrect placement of divs at certain screen widths. Additionally, there are unexpected distances between the divs when resizing the window. I have been unable to identify the source of these issues. I created the fiddle to help diagnose the problem, but surprisingly, the fiddle displays the content flawlessly!
I believe I might be overlooking something simple.
(I am using isotope.js for filtering, though I don't think that is relevant to this particular issue.)
EDIT: After experimenting further, I made some changes to the code: https://jsfiddle.net/71qpceqb/1/ by adjusting the col-400-12 to accommodate all widths and integrating it into the isotope masonry grid. I also updated the JS code accordingly. Surprisingly, the fiddle now works as intended, while the original site still experiences problems. The only noticeable difference is the presence of the "transform: translate3d(278px, 250px, 0px);" element style in the original site, which is absent in the jsFiddle version.
I am struggling to understand why this transform occurs on my original site and how to rectify or prevent it. Any assistance in resolving this matter would be greatly appreciated!