Crave theme - slideshow issue on mobile

[mk331]

Hi there, I could use some help with my slideshow on crave theme - on mobile only. I’m trying to remove the text box that appear below the second, third, fourth, fifth photos on my slideshows on this page (they only appear on mobile): Commissions – Produce Aisle

I was able to remove the text boxes on my desktop view, but not on mobile. The tricky thing is that I want to keep the text box on the first photo in the slideshow but not the ones that follow. Please let me know if anyone can help with custom CSS!

Thank you!

[tim_tairli]

I’d try CSS code like this:

@media (max-width: 749px) {
  .banner__content:has(.slideshow__text:empty) {
    display:  none;
  }
  .slideshow__slide:has(.slideshow__text:empty) .slideshow__media {
    min-height:100%;
  }
}

[Ploqo]

I reproduced this on a Crave/Dawn store

@tim_tairli’s CSS - I tested it.

@media screen and (max-width: 749px) {
  .slideshow__slide .banner__content:has(.slideshow__text:empty) {
    display: none;
  }
  .slideshow__slide:has(.slideshow__text:empty) .slideshow__media {
    min-height: 100%;
  }
}

here is on my own store: Before

After

Online Store > Themes > … > Edit code > layout/theme.liquid, then paste it just before </head> wrapped in <style> ... </style>.

I also applied the css via browser on your URL:
Before

After