Magento 2 – Owl Carousel Not Fully Responsive

cssjavascriptmagento2theme

I would like to use Owl Carousel in a new Magento 2 install, but I am having issues when resizing the browser window. I have a clean and working install of Magento 2. I have created a very simple theme that extends the standard Magento Blank theme. My custom them just loads the required css and javascript stuff for the Owl Carousel , nothing more. I have followed the steps in this tutorial (http://www.boolfly.com/magento-2-slider-with-owl-carousel), using my custom theme, and I can confirm that the Owl Carousel works and preforms as expected.

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?

Best Answer

After some testing I have found the issue. The div section with a class of columns is set to display:flex on screen sizes 767px or below. This display setting is causing the viewpoint to expand to the maximum size. As the Owl Carousel is large in length, the viewpoint expands to accommodate this.

Obviously a display setting of flex is better for smaller views, so to overcome this issue, setting overflow to hidden, scroll or auto on the div.column.main has fixed the issue.

I'm not 100% sure if this will have any repercussions later on, but for now this has fixed the issue and may help anyone else with the same problem.

Related Topic