I'm currently working on creating a responsive website using HTML, CSS, and Bootstrap 4. However, I am encountering difficulties in making my carousel width fill up the entire screen of Pixel 2 XL (landscape - w: 823px) and iPad (portrait - w: 768px). The images attached showcase the issue.
Interestingly, the carousel works perfectly for other screen sizes where it fills up 100%. I've attempted setting both the body and parent to width: 100%, but it still doesn't resolve the problem for Pixel 2 XL and iPad screens.
View image of Pixel 2 XL landscape
Below is the code snippet:
Carousel item:
<div class="carousel-inner">
<div class="carousel-item">
<img src="cats.jpg" alt="cats" width="1280" height="400">
<div class="carousel-caption">
<h2>Your Cat is Happy</h2>
<p>Feed it more treats!</p>
<button type="button" class="btn">BUY TREATS</button>
</div>
</div>
</div>
Normal CSS styling:
.carousel-inner img {
filter: brightness(70%);
width: 100%;
height: 100%;
}
.carousel-caption {
width:100%;
max-height: 50%;
left:0;
margin-bottom:9%;
text-align: left;
padding-left: 60px;
padding-right: 60px;
font-family: Lato, sans-serif;
-webkit-animation-name: caption_animation; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
animation-iteration-count: 1;
animation-name: caption_animation;
animation-duration: 1s;
}
.carousel-item img {
width: 100%;
}
CSS for maximum screen width:
@media only screen and (max-width: 1025px){
.carousel-item img {
width: 100%;
height: 60%;
}
.carousel-caption {
margin-bottom: 130px;
font-size: 12px;
-webkit-animation-name: caption_animation 1s 1;
animation-name: caption_animation 1s 1;
}
}