The issue happens when I resize the browser to ensure it works in a responsive way. When the browser reaches 768px, the carousel goes full width (off the page with browser scroll bars). I have tried a simple dummy web page (not Magento) and the carousel works perfectly.
As such I can only assume it has something to do with the css of the Magento/Blank theme or a simple schoolboy error on my part. Do you guys have any ideas?
-- Edit --
When using a theme that inherits the Magento/Blank theme, the issue happens at 767px and below. To test my theory that the mobile only style was the issue, I removed the mobile only style and set up the desktop style (
css/styles-l.css) to have no media options. When the page was reloaded, the resizing issue did not occur. I also tried removing
css/styles-l.css and only using
css/styles-m.css to see if the would have the sizing issue, and it does.
So for some reason, Owl Carousel and the Magento/Blank theme dos not play nicley together below 767px. I haven't had the time to really look into the mobile style as of yet but I will do. Does any CSS people have any idea of where this issue might be found or what area I might look at first?