Why is my slideshow height reverting back to original on mobile devices?

Hello guys!

I have a problem with slideshow height. I don’t understand why, but it went back to the original position.

I used this code to display the initial screen slides on the phone at full height of the screen.

media (max-width:768px) {
slideshow-component .slideshow.banner {
height: 75vh !important;
}
}

It’s been working fine so far…

I used the following code for the buttons and text, but on IOS devices and wider phone screens it shows like this:

@media only screen and (max-width: 749px){
.slideshow__text.banner__box {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) !important;

}
}

My request would be, how to make it show like the first two pictures on all devices (at least similar)?

Thank you so much!

UPDATE: I managed to fix the text box with the text position, but need help to display the same height (about 75% of the screen size) on all mobile devices.

Hi @Atsimataves ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible

Hi @BSS-Commerce ,

Yes, of course: amberound.com

Thanks!