0
Homepage Slider ist die Anzeige nicht auf mobilen Geräten gut
.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{
\t \t height: auto;
\t }
\t .main-slider-content{
\t \t left: 5%;
\t \t top: 8%;
\t \t margin-top: 0;
\t }
\t .main-slider-content > h3{
\t \t font-size: 20px;
\t \t line-height: 24px;
\t }
\t .main-slider-content > h4{
\t \t line-height: 22px;
\t }
\t .slide-2{
\t \t margin-top: 0;
\t } \t
\t .slide-2 > h3{
\t \t font-size: 20px;
\t \t line-height: 24px;
\t }<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>Ich habe Probleme mit meiner Homepage Schieberegler, wenn ich meinen Browser schrumpfen oder meine Website öffnen auf einem Mobiltelefon der Schieber Bild richtige Form verliert und auf gleichen Schieberegler, werden die Folien nicht automatisch geändert. Ich habe viel versucht, das herauszufinden.
Bitte geben Sie Ihren Code direkt in Ihrer Frage. Menschen helfen Ihnen eher, wenn sie Ihren Code direkt sehen können, als wenn sie Ihre Website besuchen und den Quellcode dort einsehen müssen. –
Das habe ich jetzt getan, es tut mir leid, dass ich das verpasst habe. – JOEville