Hiding slideshow text for mobile view only - Minimal theme

[itsud1021]

Hey Shop-Comm,

I am using the minimal theme for my store. I understand why using a text free photo is suggested. The slideshow text shows up exactly how I would like in desktop view. In mobile view the text appears below the photo in the slideshow, still very large and cumbersome. If I am not able to have the text placed smaller on the photo in mobile view then I would like to remove it from mobile view ONLY. Can I 'comment out' for this result? I took a peek in the theme.scss.liquid assets and can't quite find the option. If this can be done would someone kindly guide me?

https://livewellintheworld.com/ - if needed

Thanks,

Dusti

[Guleria]

Hello Dusti,

Place below code in your css

@media (max-width: 768px){ 
.index-section.slideshow-section {
    display: none;
}
}

[itsud1021]

That resulted in removing the whole slideshow. I am only looking to remove the text. Is there a way to replace "none" with something that would just show the slide without the text. Going to try "slide"...

[Guleria · Accepted solution]

Use this 

@media (max-width: 768px){ 
.slideshow__mobile-text-container {
    display: none !important;
}
}

[itsud1021]

Replacing "none" with "slide" just left the whole slide show including text.

Open for any other suggestions or suggestions to edit that code to not include slide text.

Thank you to anyone who is taking the time to offer suggestions, even when they don't work, certainly helps the learning curve!

[itsud1021]

Bingo!

Thank You @Guleria!

[elisianadiaz]

Hi, I am using the Icon theme. I am trying to remove the text that overlays my image in mobile specifically, but not the button. When I tried the code in this in my liquid files, it didn't do anything. Is there anything else I can try? 

---

@Guleria wrote:

Use this 

@media (max-width: 768px){ 
.slideshow__mobile-text-container {
    display: none !important;
}
}

---

---

@Guleria wrote:

Use this 

@media (max-width: 768px){ 
.slideshow__mobile-text-container {
    display: none !important;
}
}

---