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:
@media screen and (max-width: 749px){
.banner--mobile-bottom:not(.banner--stacked) .banner__content {
display: none;
}
}
—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
2 Likes
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;
}
}
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:
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 ----->
before the body ----->
if this code work please do not forget to like and mark it solution
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
Hi @pdgdemds
You can solve it by turning off Stack text below imageoption in Mobile layout of Slideshow section settings
