Testimonial section not displaying correctly in IE11


Topic: Testimonial section not displaying correctly in IE11

depicturevis pro asked 5 years ago

Hi, The testimonial section is not working correctly on my webpage on IE11. The parts of the testimonial are put in one column over each other to the left. You can see the problem by looking at depicture.io page with IE11. Is there a way to fix this? Code:
<div class="container">
            <!--Section: Testimonials v.4-->
            <section class="section" id="testimonials">

                <!--Section heading-->
                <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">What Our Clients Say</h1>

                <div class="row">
                    <!--Carousel Wrapper-->
                    <div id="multi-item-example" class="carousel testimonial-carousel slide carousel-multi-item wow fadeIn" data-ride="carousel">

                        <!--CAROUSEL CONTROL SECTIONS - ENABLE WHEN MORE THAN 3 TESTIMONIALS
                        <div class="controls-top">
                            <a class="btn-floating btn-small mdb-color" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
                            <a class="btn-floating btn-small mdb-color" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a>
                        </div> -->
                        <!--/.Controls-->

                        <!--Indicators
                        <ol class="carousel-indicators">
                            <li data-target="#multi-item-example" data-slide-to="0" class="active mdb-color"></li>
                            <li data-target="#multi-item-example" data-slide-to="1" class="mdb-color"></li>
                            <li data-target="#multi-item-example" data-slide-to="2" class="mdb-color"></li>
                        </ol> -->
                        <!--/.Indicators-->

                        <!--Slides-->
                        <div class="carousel-inner" role="listbox">

                            <!--First slide-->
                            <div class="carousel-item active">
                                <!--First column-->
                                <div class="col-md-4">
                                    <div class="testimonial">
                                        <!--Avatar-->
                                        <div class="avatar">
                                            <img src="img/AharonyS.png" class="rounded-circle img-fluid">
                                        </div>
                                        <!--Content-->
                                        <h4>Shai Aharony</h4>
                                        <h5>Managing Director - Reboot Online</h5>
                                        <p><i class="fa fa-quote-left"></i> Special thanks to the Depicture team - they gave us the necessary data visualization tools to make the task of conveying data to our users easy and effective.</p>

                                        <!--Review-->
                                        <div class="orange-text">
                                            <i class="fa fa-star"> </i>
                                            <i class="fa fa-star"> </i>
                                            <i class="fa fa-star"> </i>
                                            <i class="fa fa-star"> </i>
                                            <i class="fa fa-star"> </i>
                                        </div>
                                    </div>
                                </div>
                                
                                <!--/First column-->

                                <!--Second column-->
                                <div class="col-md-4 hidden-sm-down">

                                    <div class="testimonial">
                                        <!--Avatar-->
                                        <div class="avatar">
                                            <img src="img/Steven.jpg" class="rounded-circle img-fluid">
                                        </div>
                                        <!--Content-->
                                        <h4>Steven Englander</h4>
                                        <h5>Innovation, Product Management, Growth, Recruiting</h5>
                                        <p><i class="fa fa-quote-left"></i> Outstanding work! The depicture team are highly skilled data visualization experts. They went above and beyond our expectations. I am thrilled with how the work turned out!</p>

                                        <!--Review-->
                                        <div class="orange-text">
                                            <i class="fa fa-star"> </i>
                                            <i class="fa fa-star"> </i>
                                            <i class="fa fa-star"> </i>
                                            <i class="fa fa-star"> </i>
                                            <i class="fa fa-star"> </i>
                                        </div>
                                    </div>

                                </div>
                                <!--/Second column-->

                                <!--Third column-->
                                <div class="col-md-4 hidden-sm-down">
                                    <div class="testimonial">
                                        <!--Avatar-->
                                        <div class="avatar">
                                            <img src="img/JoyceG.jpg" class="rounded-circle img-fluid">
                                        </div>
                                        <!--Content-->
                                        <h4>Gabrielle Joyce</h4>
                                        <h5>Marketing and Creative</h5>
                                        <p><i class="fa fa-quote-left"></i> The Depicture team has taken a creative and effective approach to finding a solution to our problem. They have been in full control of the situation - from idea to production. Professional, prompt and easy to work with!</p>

                                        <!--Review-->
                                        <div class="orange-text">
                                            <i class="fa fa-star"> </i>
                                            <i class="fa fa-star"> </i>
                                            <i class="fa fa-star"> </i>
                                            <i class="fa fa-star"> </i>
                                            <i class="fa fa-star"> </i>
                                        </div>
                                    </div>
                                </div>
                                
                                <!--/Third column-->

                            </div>
                            <!--/.First slide-->

                            <!--/.Third slide-->

                        </div>
                        <!--/.Slides-->

                    </div>
                    <!--/.Carousel Wrapper-->
                </div>
                
            </section>
            <!--/Section: Testimonials v.4-->
            </div>

Marta Szymanska staff pro premium answered 5 years ago

Hi, Firstly, your version of MDB is 4.3.1 :) . And secondly I see this problem on mdb.com too, there is problem that IE11 doesn't read flexbox correctly. We will fix this in our next release which will be very soon. Bootstrap carousels are changing now, so this testimonial carousel probably also will change. Best, Marta

depicturevis pro answered 5 years ago

Dear Marta, Thank you for your information. Looking forward for the update. Regards, Kristian
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No