0

Any reason why a carousel is not responsive in Edge or Chrome but it is still responsive in IE11. On its own the carousel follows responsive design and reacts to changes of the windows size. As soon as a banner is placed above the carousel both the banner and carousel are not responsive. Their size does not change and it is fixed. In IE11 the banner and carousel resize as desired with the windows size.

owlCarousel version is 2.1.6

$('.owl-carousel-1').owlCarousel({
                    loop:true,
                    margin:10,
                    navText:['<','>'],
                    autoplay:false,
                    autoplaySpeed:1000,
                    autoplayHoverPause:false, 
                    responsiveClass:true,
                    responsiveBaseElement:window,
                    responsiveRefreshRate:100,
                    responsive:{
                        0:{
                            items:1,
                            nav:true
                        },
                        600:{
                            items:2,
                            nav:true
                        },
                        1000:{
                            items:3,
                            nav:true
                        }
                    }
                });
kbn
  • 1
  • 1
  • Welcome to stackoverflow. IE is stubborn when it comes to things like styling. Usually it's: what works on other browsers may not work in IE. So I'd say its luck. For a good answer we need a [mcve] – yezzz Sep 06 '16 at 21:16

1 Answers1

0

Apparently the problem was that the carousel was within a div inside of a flex box. Once I gave the div width:100%, it started responding and resizing nicely. The width:100% was not needed by IE.

This worked in Edge, Chrome (inline style only for demonstration):

<div id="content">  
  <div class="Grid Grid--gutters Grid--holly-grail" style="display:flex">
    <div class="Grid-cell main" style="width: 100%;">
        <div class="article-box">
                <div id="article">
                    <section id="intro-carousel">
                        <div class="owl-carousel owl-loaded owl-drag" id="intro-banner-carousel"> 
                        </div>  
                    </section>
                </div>
        </div>
    </div>
    <div class="Grid-cell aside aside-2" id="right-column">
        <div id="action-links">
        </div>
        <div class="article-box Demo2 Holly2" id="contact-details">
        </div>
    </div>
  </div>  
</div>
kbn
  • 1
  • 1