Responsivo

[AxM]

Galera boa tarde.

 

Tenho um slider responsivo até a tela do android... Quando vou para o iphone a foto fica esticada.

Alguém pode ajudar?

Seguem os códigos :

HTML:

    <section id="banner_part">
        <div class="slide_active">
            <div class="banner_item" data-bg-image="images/banner-2.jpg">
                <div class="container text-center">
                    <div class="row">
                        <div class="banner_text">
                            <h4><span>CONFORTO</span> ADAPTADO AO SEU ESTILO.</h4>
                            <p>Valorize o seu imóvel, diminua a fatura energética e a pegada ambiental.</p>
                        </div>
                    </div>
                </div>
            </div>

 

CSS

#banner_part {
    position: relative;
}

.banner_item {
    position: relative;
    height: 100vh;
    background-attachment: fixed!important;
    background-position: center!important;
    background-size: cover!important;
}

.banner_item::after {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .3);
    z-index: 2
}

.banner_text {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    width: 100%;
}

.banner_text h3 {
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 400;
}

.banner_text h4 {
    padding: 15px 0 24px;
    font-size: 40px;
    display: inline-block;
    border-radius: 4px;
    font-weight: 500;
}

.banner_text h4 span {
    font-weight: 700;
}

.banner_text p {
    font-weight: 300;
    max-width: 570px;
    margin: auto;
    margin-bottom: 40px;
}

.banner_text a {
    text-transform: uppercase;
}

/* arrows */

.banner_arrows i {
    height: 50px;
    line-height: 44px;
    font-size: 48px;
    background: transparent;
    width: 45px;
    text-align: center;
    cursor: pointer;
    border: 2px solid;
    opacity: 0;
}

#banner_part:hover .banner_arrows i {
    opacity: 1;
}

.banner_arrow_left {
    position: absolute;
    top: 57%;
    left: 5%;
    transform: translateY(-50%)
}

.banner_arrow_right {
    position: absolute;
    top: 57%;
    right: 5%;
    transform: translateY(-50%)
}

/* Dots */

.slide_active .slick-dots {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.slide_active .slick-dots li {
    display: inline-block;
    margin: 0 5px
}

.slide_active .slick-dots li button {
    padding: 2px;
    display: block;
    height: 13px;
    width: 13px;
    text-align: center;
    line-height: 13px;
    border-radius: 50%;
    background: transparent;
    color: transparent;
    border: 1px solid;
}

.slide_active .slick-dots li button:focus {
    outline: none
}

 

JS

$('.slide_active').slick({
        slidesToScroll: 1,
        slidesToShow: 1,
        speed: 1000,
        fade: true,
        infinite: true,
        arrows: true,
        prevArrow: '.banner_arrow_left',
        nextArrow: '.banner_arrow_right',
        dots: true,
        autoplay: true,
        cssEase: 'linear'
    });

    /* About veno box js */
    $('.venoboxvideo').venobox({
        autoplay: true,
        closeColor: '#fcac45'
    });

    /* Achivement Counter js */
    $('.counting').counterUp({
        delay: 30,
        time: 2000
    });

     /* Work filtrizr js */
    $('.filtr-container').filterizr();

    // work filtrizr control js
    $('.simplefilter li').on('click', function () {
        $('.simplefilter li').removeClass('active');
        $(this).addClass('active');
    });

    /* Work Venobox js */
    $('.venobox').venobox({
        arrowsColor: "#fcac45",
        spinner: 'three-bounce',
        spinColor: '#fcac45',
        closeColor: '#fcac45'
    });

Desde já, obrigado pela ajuda.