I created a fullscreen slider using the carousel bootstrap feature. However, when the screen size shrinks, the background image resizes and centers itself. Instead of centering the image on smaller screens, I want it to focus on the right side.
Here is how the background image appears on a normal screen (fullscreen slider): Normal Screen
And this is how the background image appears on a smaller screen (still fullscreen): Smaller Screen
This is the CSS code I have used:
@media (max-width: 768px) {
.carousel-inner>.item{
position: relative;
}
.carousel-inner>.item>img{
position: absolute;
top: 0;
right: 0;
}
}<div class="carousel-inner">
<div class="item active">
<img id="h-1" src="Assets/1.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<h1>C</h1>
<hr>
<ul class="descslider">
<li>asd</li>
<li>qwe</li>
<li>zxcv</li>
</ul>
</div>
</div>
</div>
<div class="item">
<img id="h-2" src="Assets/2.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<h1>C</h1>
<hr>
<ul class="descslider">
<li>asd</li>
<li>qwe</li>
<li>zxcv</li>
</ul>
</div>
</div>
</div>
<div class="item">
<img id="h-3" src="Assets/3.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<h1>C</h1>
<hr>
<ul class="descslider">
<li>asd</li>
<li>qwe</li>
<li>zxcv</li>
</ul>
</div>
</div>
</div>
</div>
I have attempted to implement the above code, but it did not achieve the desired effect. Any assistance would be greatly appreciated. Thank you :)