Use owlcarousel to slide collage image

Question

I am making a slider of several collages of images with the plugin named owlcarousel. The collage is displayed correctly when I have not yet reduced the screen on google chrome, opera and safari.

Once the screen is small, the display is completely different

I also tested the code on firefox 37.0.2 and Internet explorer 11 when the screen is normal.

On firefox:

On Internet Explorer:

This the code I use to realize the carousel:

.featured-sellers-collage {
  width: 380px;
}

.featured-sellers-collage .div1 p {
 top: 0;
 bottom: 0;
 float:left;
 width: 190px;
}
.featured-sellers-collage .div1 p img {
 
 width: 100%;
}

<div class="container">
      <div class="carousel-featured-sellers">
       <div class="featured-sellers-collage">
        <div class="div1">
         <p><img src="images/189x324-4.jpg" alt=""/></p>
         <p><img src="images/189x324-5.jpg" alt=""/></p>
        </div>
        
        <div class="div2">
         <img src="images/380x325-6.jpg" alt=""/>
        </div>

       </div>
       
       <div class="featured-sellers-collage">
        <div class="div1">
         <p><img src="images/189x324-4.jpg" alt=""/></p>
         <p><img src="images/189x324-5.jpg" alt=""/></p>
        </div>
        
        <div class="div2">
         <img src="images/380x325-6.jpg" alt=""/>
        </div>
       </div>
       
       <div class="featured-sellers-collage">
        <div class="div1">
         <p><img src="images/189x324-4.jpg" alt=""/></p>
         <p><img src="images/189x324-5.jpg" alt=""/></p>
        </div>
        
        <div class="div2">
         <img src="images/380x325-6.jpg" alt=""/>
        </div>
       </div>
       
       <div class="featured-sellers-collage">
        <div class="div1">
         <p><img src="images/189x324-4.jpg" alt=""/></p>
         <p><img src="images/189x324-5.jpg" alt=""/></p>
        </div>
        
        <div class="div2">
         <img src="images/380x325-6.jpg" alt=""/>
        </div>
       </div>
       
       <div class="featured-sellers-collage">
        <div class="div1">
         <p><img src="images/189x324-4.jpg" alt=""/></p>
         <p><img src="images/189x324-5.jpg" alt=""/></p>
        </div>
        
        <div class="div2">
         <img src="images/380x325-6.jpg" alt=""/>
        </div>
       </div>
       
       <div class="featured-sellers-collage">
        <div class="div1">
         <p><img src="images/189x324-4.jpg" alt=""/></p>
         <p><img src="images/189x324-5.jpg" alt=""/></p>
        </div>
        
        <div class="div2">
         <img src="images/380x325-6.jpg" alt=""/>
        </div>
       </div>
       
       <div class="featured-sellers-collage">
        <div class="div1">
         <p><img src="images/189x324-4.jpg" alt=""/></p>
         <p><img src="images/189x324-5.jpg" alt=""/></p>
        </div>
        
        <div class="div2">
         <img src="images/380x325-6.jpg" alt=""/>
        </div>
       </div>
       
      </div>
     </div>
     <script src="js/jquery-1.12.2.min.js"></script>
     <script src="js/owl.carousel.min.js"></script>
     <script>
      (function($){
    
       $('.carousel-featured-sellers').owlCarousel({
        items: 3,
        loop:true,
        margin:25,
        nav:true,
        navText: ["<span class='carousel-nav-left'><i class='fa fa-chevron-left'></i></span>","<span class='carousel-nav-right'><i class='fa fa-chevron-right'></i></span>"],
        dots: true,
        responsive:{
         0:{
          items:1
         },
         430:{
          items:2
         },
         800:{
          items:3
         },
         1400:{
          items:4
         },
         1800:{
          items:6
         },
         2400:{
          items:7
         },
         3000:{
          items:9
         }
        }
       })
       
      })(jQuery);
     </script>
      

Kindly let me know how I can solve that problem. Thanks

Answer 1

Adding a float: right; to the div2 of your code will solve the problem on firefox and internet explorer.

Now concerning the responsiveness issue is due to the fix width, better use percentage.

Try this code:

body {
 width: 380px;
}
.featured-sellers-collage {
  width: 100%;
}

.featured-sellers-collage .div1 p {
 top: 0;
 bottom: 0;
 float:left;
 width: 50%;
}
.featured-sellers-collage .div1 p img {
 
 width: 100%;
}
.featured-sellers-collage .div2 {
 flaot: right;
}