Flexslider fullscreen is not centered in mobile

Question

I have this fullscreen background that I'm using and it works correctly on my laptop and big screens. The problem is when I enter the website from a mobile device. The background image (and the buttons above it) move to the side. I do not know why is this. I think it has to be with the bootstrap.min.

The HTML:

<!-- Intro Section -->
    <section id="intro">
        <!-- Hero Slider Section -->
        <div class="flexslider fullscreen-carousel hero-slider-1 ">
            <ul class="slides">

                <!--Slide-->
                <li data-slide="dark-slide">
                    <div class="slide-bg-image overlay-light dark-bg parallax" data-background-img="images/connexion_background.jpg">
                        <div class="js-Slide-fullscreen-height container">
                            <div class="intro-content">
                                <div class="intro-content-inner">
                                    <br />
                                    <div><a class="btn btn-md btn-white" href="contact.php">Request a Quote</a><span class="btn-space-10"></span><a class="btn btn-md btn-white " href="research-solutions.html">View Our Solutions</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>


            </ul>
        </div>
        <!-- End Hero Slider Section -->
    </section>
    <div class="clearfix"></div>
    <!-- End Intro Section -->

The JS:

 var pageSection = $('.slide-bg-image, .bg-image');
pageSection.each(function (indx) {

    if ($(this).attr("data-background-img")) {
        $(this).css("background-image", "url(" + $(this).data("background-img") + ")");
    }
});

function fullScreenSlider() {
    if ($('.fullscreen-carousel').length > 0) {

        $('.fullscreen-carousel').flexslider({
            animation: "slide",
            //  startAt: 0,
            animationSpeed: 700,
            animationLoop: true,
            slideshow: true,
            easing: "swing",
            controlNav: false,
            before: function (slider) {
                //Slide Caption Animate
                $('.fullscreen-carousel .intro-content-inner').fadeOut().animate({ top: '80px' }, { queue: false, easing: 'easeOutQuad', duration: 700 });
                slider.slides.eq(slider.currentSlide).delay(400);
                slider.slides.eq(slider.animatingTo).delay(400);

            },
            after: function (slider) {
                //Slide Caption Animate
                $('.fullscreen-carousel .flex-active-slide').find('.intro-content-inner').fadeIn(2000).animate({ top: '0' }, { queue: false, easing: 'easeOutQuad', duration: 1200 });

                // Header Dark Light
                headerDarkLight_with_flexslider();

            },
            start: function (slider) {
                $('body').removeClass('loading');

                // Header Dark Light
                headerDarkLight_with_flexslider();

            },
            useCSS: true,
        });
    };

    // Header Dark Light
    function headerDarkLight_with_flexslider() {

        var color = $('.fullscreen-carousel').find('li.flex-active-slide').attr('data-slide');
        if (color == 'dark-slide') {
            $('#header').addClass('header').removeClass('header-light');
            $('#header').removeClass('header-default');
        }
        if (color == 'light-slide') {
            $('#header').addClass('header-light').removeClass('header-dark');
            $('#header').removeClass('header-default');
        }
        if (color == 'default-slide') {
            $('#header').removeClass('header-dark');
            $('#header').removeClass('header-light');
            $('#header').addClass('header');
        }
    };

    // "fullscreen-carousel" height
    fullScreenCarousel();
    function fullScreenCarousel() {
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();

        if ($(window).width() > 767) {
            $('.hero-slider-1 .slides .js-Slide-fullscreen-height').css("height", windowHeight);
        }
        else {
            $('.hero-slider-1 .slides .js-Slide-fullscreen-height').css("height", '400px');
        }

    };
    $(window).resize(function () {
        fullScreenCarousel();
    });


};

This is the result in mobile:

The buttons and the background image are moved to the right. They are not centered and the background picture repeat itself.

I can see this on the development tool of Mozilla:

Any help would be appreciated.

Thank you.

Answer 1

Your flex slider left position is not right , You can simply fix this with left property, try with the below code

.fullscreen-carousel .slides li {
    height: 100%;
    left: -40px; /* newly added */
    overflow: hidden;
    position: relative;
}

can you try this also , remove the left:-40px and add this jquery to the page

$(window).load(function() {
   $('.flexslider').flexslider();
   $(window).trigger('resize');
});

Answer 2

can you try to add following css at last of the css document

.flexslider ul.slides {
 padding: 0 !important;
}

Answer 3

center the images in your slides add this in your css

.flexslider img { margin: 0 auto; }

OR

.flexslider .slides > li{
background-size: cover;
background-repeat: no-repeat;
background-position: center;

}