I'm encountering a problem similar to the one discussed in this thread about Bootstrap Carousel Caption movement after transition. Despite reading and attempting the solutions provided, I still haven't been able to resolve my issue...
In my case, the text within .carousel-caption unexpectedly drops down from the top during the slide transition within the carousel. My intention is for it to remain positioned near the bottom. Although I've made some changes to the CSS of the carousel, I must have inadvertently altered something along the way that's causing this problem. I've yet to identify the root cause, and if all else fails, my last resort following this post will be to start afresh! :D
Please note that this problem only arises when the browser width exceeds or equals 768 pixels.
You can see the problem on my website through this link: . To make the issue more visible, I added a transparent background to .carousel-caption. Alternatively, you can replicate the issue by adding a background to .item.
Below are the CSS modifications I made for the carousel under @media (min-width: 768px):
.carousel-caption {
position:absolute!important;
top: inherit!important;
background-color: rgba(0, 0, 0, 0.5);
bottom:0;/*was 20px*/
padding-top:0!important;/*was 20px*/
padding-bottom:10px;/*was 30px*/
padding-right:inherit!important;
padding-left:inherit!important;
right:0!important;/*was 20%*/
left:0!important;/*was 20%*/
background: inherit;
border-bottom: 17px solid $accent-green;
}
And here are the CSS adjustments I made for the carousel for resolutions below 768 px:
/*carousel*/
.carousel-control .fa-chevron-circle-left, .carousel-control .fa-chevron-circle-right, .carousel-control .icon-next, .carousel-control .icon-prev {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
margin-top: -10px;
}
.carousel-caption {
position: relative;
left: auto;
right: auto;
background:$primary-green;
border-bottom: 17px solid $accent-green;
padding-top:1px;
padding-right:10px;
padding-left:10px;
top: 0;
}
.carousel-control.left, .carousel-control.right {
background-image: none!important;
}
.carousel-indicators {
bottom:-15px;/*was 20px*/
}
Thank you for your assistance!