主页Slider在移动设备上显示效果不佳

Question

＆＃13;

＆＃13;

.main-slider-img > img{
        width: 100%;
    }
    .main-slider-content {
        left: 15%;
        margin-top: -146px;
        position: absolute;
        top: 50%;
    }
    .main-slider-content > h2{
        line-height: 50px;
        padding: 0 25px;
        background-color: #68a868;
        display: inline-block;
        text-shadow:2px 2px 0 rgba(0, 0, 0, 0.1);
    }
    .main-slider-content > h3{
        font-size: 30px;
        font-weight: 800;
        line-height: 45px;
        letter-spacing: 2px;
    }
    .main-slider-content > h3::after {
        
        position: absolute;
        bottom: -8px;
        content: " ";
        display: block;
        height: 3px;
        left: 0;
        width: 80px;
    }
    .main-slider-content a{
        line-height: 38px;
        padding: 4px 22px 0;
        color: #fff;
        border: 3px solid #fff;
        display: inline-block;
        text-decoration: none;
    }
    .main-slider-content a > i{
        margin-left: 6px; 
    }
    .main-slider-content a:hover{
        background-color: #fff;
        color: #5cb85c;
    }
    .main-slider.owl-theme .owl-controls {
        margin-top: 0;
        position: absolute;
        top: 50%;
        width: 100%;
    }
    .main-slider.owl-theme .owl-prev {
        left: 20px;
        position: absolute;
    }
    .main-slider.owl-theme .owl-next {
        right: 20px;
        position: absolute;
    }
    
    .main-slider.owl-theme .owl-controls .owl-buttons div {
        border-radius: 0;
        color: #fff;
        line-height: 88px;
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.4);
        padding: 0 10px;
        -webkit-transition: all .5s ease ;
        -moz-transition: all .5s ease ;
        -ms-transition: all .5s ease ;
        -o-transition: all .5s ease ;
        transition: all .5s ease ;
    }
    .main-slider.owl-theme .owl-controls .owl-buttons div:hover{
        background-color: rgba(92, 184, 92, 0.4);
    }
    .slide-2 {
        height: 100%;
        left: 0;
        margin-top: -90px;
        width: 100%;
    }
    .slide-2 > h3 {
        font-size: 45px;
        line-height: 55px;
    }
    .main-slider-content.slide-2 > h3:after{
        display: none;
    }
    .overlay{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(54, 54, 54, 0);
        opacity: 0.6;
    }

.main-slider-img.position-r > img{
		height: auto;
	}
	.main-slider-content{
		left: 5%;
		top: 8%;
		margin-top: 0;
	}
	.main-slider-content > h3{
		font-size: 20px;
		line-height: 24px;
	}
	.main-slider-content > h4{
		line-height: 22px;
	}
	.slide-2{
		margin-top: 0;
	}	
	.slide-2 > h3{
		font-size: 20px;
		line-height: 24px;
	}

＆＃13;

<div class="container-fluid no-padding">
            <div class="main-slider">
                <div class="item">
                    <div class="main-slider-img position-r">
                        <img src="http://www.trezalliance.com/img/s1.jpg" alt="">
                        <div class="overlay"></div>
                        
                    </div>
                </div>
                <div class="item">
                    <div class="main-slider-img position-r">
                        <img src="http://www.trezalliance.com/img/s2.jpg" alt="">
                        <div class="overlay"></div>
                        
                    </div>
                </div>
            </div>
        </div>

＆＃13;

＆＃13;

＆＃13;

我的主页滑块出现问题，每当我缩小浏览器或在手机上打开我的网站时，滑块图像会丢失正确的形状，并且在同一个滑块上，幻灯片不会自动更改。我花了很多时间试图解决这个问题。

My URL

Answer 1

修改第10行和第346行的responsive.css

.main-slider-img.position-r > img {
    height: 500px;
}

到

.main-slider-img.position-r > img {
    height: auto;
}

并添加

@media (max-width: 767px) {
    .main-slider.owl-theme .owl-controls {
        top: 20%
    }
}

Answer 2

你的css。

.main-slider-img.position-r > img {
    height: 500px;
}

更改为

.main-slider-img.position-r > img {
    height: auto;
}

在您的所有媒体查询中