Removing the gap btwn mobile slideshow images and pagination dots

[pdgdemds]

So there’s a slideshow I added and I made it available to view only on mobile, but there’s still a large white space between the image and the pagination dots that I can’t get rid of. I tried adding the following code to theme.liquid to hide the extra content on mobile:

<style>
@media screen and (max-width: 749px){
.banner--mobile-bottom:not(.banner--stacked) .banner__content {
display: none;
}
}
</style>

—but the issue still persists. I’m using the Studio theme, version 15.3.1, and would appreciate any help figuring out what’s causing this gap and how to remove it.

https://ktjtgs-wb.myshopify.com/?pb=0

[TheScriptFlow_]

Hey paste this code in the end of base.css file.

@media only screen and (max-width: 767px) {
.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient.slideshow__text--center.slideshow__text-mobile--center {
    display: none !important;
}
}

[BiDeal-Discount]

Hi @pdgdemds 

let try to add this Custom CSS code:

@media screen and (max-width: 749px) {
    .banner--mobile-bottom:not(.banner--stacked) .banner__content,
    #Slide-template--17965952041048__slideshow_yDxVWm-2 {
        display: none;
    }
}

result:

[Mustafa_Ali]

<style>
@media screen and (max-width: 767px) {
.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient.slideshow__text--center.slideshow__text-mobile--center
Specificity: (0,8,0)
 {
    display: none !important;
 }
}
</style>

hey @pdgdemds @ dear follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body> ----->
before the body ----->
if this code work please do not forget to like and mark it solution

[GTLOfficial]

Hello @pdgdemds 
Go to online store ----> themes ----> actions ----> edit code ----> assets ---> section-image-banner.css
add this code at the end of the file and save.

@media screen and (max-width: 749px) {
.banner:not(.banner--mobile-bottom) .field__input, .banner--mobile-bottom:not(.banner--stacked) .banner__box.color-scheme-1 {
display: none !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Dan-From-Ryviu · Accepted solution]

Hi @pdgdemds 

You can solve it by turning off Stack text below image option in Mobile layout of Slideshow section settings