On my bootstrap 4 website’s homepage, i have a jquery swiper slider.
My problem is, that on mobile devices, the images are not aligned center. For example, if i vire the site on mobile, i dont see the full image, just the left side of it.
I tryed adding some css to the images, like background-position, but it didnt chenged anything.
Here is my demo site:
Click here
This is the slider:
<section class="slider-01 mb-6">
<div class="w-100 px-0">
<div id="main-slider" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide slide-01 align-items-center d-flex bg-overlay-dark-20 header-position bg-holder" style="background-image: url(/images/swiper/3333.jpg);">
<div class="container">
<div class="row align-items-center">
<div class="col-md-8 col-lg-10">
<div class="banner-content">
<ul class="list-unstyled d-sm-flex" data-swiper-animation="fadeInDown" data-duration="2.0s" data-delay="0.5s">
<li><i class="fas fa-circle mr-1"></i>Kombi forma</li>
<li><i class="fas fa-circle mr-1"></i>Holdfény szín</li>
<li><i class="fas fa-circle mr-1"></i>6 cm vastag</li>
</ul>
<span class="animated d-block text-white mb-4 swiper_title" data-swiper-animation="fadeInUp" data-duration="2.0s" data-delay="0.5s">Weboldal tervezés és fejlesztés</span>
<h6 class="animated text-white mt-3 mb-3" data-swiper-animation="fadeInDown" data-duration="2.0s" data-delay="0.5s">Az egyedi és rugalmas webáruházak fejlesztése a világ egyik legnépszerűbb tartalomkezelő felületén történik.</h6>
<a class="custom_button mt-4" href="/terko-akcio" title="Tovább a részletekre" target="_self" data-swiper-animation="fadeInRight" data-duration="2.0s" data-delay="0.5s">Tovább a részletekre<i class="fas fa-long-arrow-alt-right ml-3"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide slide-01 align-items-center d-flex bg-overlay-dark-20 header-position bg-holder" style="background-image: url(/images/swiper/2.jpg);">
<div class="container">
<div class="row align-items-center">
<div class="col-md-8 col-lg-10">
<div class="banner-content">
<ul class="list-unstyled d-sm-flex" data-swiper-animation="fadeInDown" data-duration="2.0s" data-delay="0.5s">
<li><i class="fas fa-circle mr-1"></i>Kombi forma</li>
<li><i class="fas fa-circle mr-1"></i>Holdfény szín</li>
<li><i class="fas fa-circle mr-1"></i>6 cm vastag</li>
</ul>
<span class="animated d-block text-white mb-4 swiper_title" data-swiper-animation="fadeInUp" data-duration="2.0s" data-delay="0.5s">Valósítsd meg ötleted a piacod legjobb webáruházával</span>
<h6 class="animated text-white mt-3 mb-3" data-swiper-animation="fadeInDown" data-duration="2.0s" data-delay="0.5s">A Magento a világ vezető nyílt forráskódú e-kereskedelmi platformja, amelyet vállalatok tízezrei használnak.</h6>
<a class="custom_button mt-4" href="/terko-akcio" title="Tovább a részletekre" target="_self" data-swiper-animation="fadeInRight" data-duration="2.0s" data-delay="0.5s">Tovább a részletekre<i class="fas fa-long-arrow-alt-right ml-3"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"><i class="fas fa-chevron-left"></i></div>
<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"><i class="fas fa-chevron-right"></i></div>
</div>
</div>
</section>
/* Swiper */
.slider-01 .swiper-slide {
height: 950px;
}
.slider-01 .banner-content ul li {
margin-right: 18px;
}
.slider-01 .banner-content ul li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1rem;
color: #ffffff;
}
.slider-01 .banner-content ul li a:hover {
color: #84bc3c;
}
.slider-01 .banner-content ul li a i {
font-size: 14px;
color: #84bc3c;
margin-right: 8px;
}
.slider-01 .banner-content ul li:last-child {
margin-right: 0px;
}
.slider-01 .slide-01 h6 {
font-weight: normal;
border-left: 3px solid #84bc3c;
padding-left: 20px;
}
.slider-01 .banner-content ul li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 19px;
color: #ffffff;
}
.slider-01 .banner-content ul li i {
font-size: 1rem;
color: #84bc3c;
margin-right: 8px;
}
.swiper_title {
font-size: 4rem;
font-weight: 900;
line-height: 65px;
letter-spacing:0.2rem;
}
.slider-01 .slide-01 h6 {
font-weight: 500;
font-size:1.2rem;
border-left: 3px solid var(--main_orange_color);
padding-left: 20px;
}
.swiper-button-prev {
left: 53px;
background-image: inherit !important;
outline: none;
width: 50px;
height: 50px;
}
.swiper-button-next {
right: 53px;
background-image: inherit !important;
outline: none;
width: 50px;
height: 50px;
}
.swiper-button-next i {
font-size: 20px;
color: rgba(255, 255, 255, 0.5);
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
outline: none;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.swiper-button-prev i {
font-size: 20px;
color: rgba(255, 255, 255, 0.5);
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
outline: none;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/* Swiper */
2
Answers
Put this responsive css
As you have given the image as a background image the only possible way that you can see complete image on responsive is to apply the below css:
But this will not suit you as you have more content in the banner. So you can provide another image for responsiveness or you can use inside the ‘.swiper-slide’ instead of the background image and make it absolute position and give width and height 100%. So it will fit the entire area of the banner.