A user seeks to make mobile slideshow images display with overlaid text and buttons (like the desktop version) instead of showing text below the image.
Solution Provided:
Assets/theme.scss.css (or theme.scss.liquid)block and hides the default mobile text containertheme.scss.liquid, the CSS can be wrapped in <style> tags and added before the </body> tag in Layout/theme.liquidIssue Encountered:
After implementing the initial code, the mobile site worked correctly, but desktop buttons became full-width instead of remaining compact. A revised CSS snippet using inline-block display was provided to fix the button sizing.
Current Status:
Another user asked for clarification on implementation when the theme.scss.liquid file is absent, with guidance provided on the alternative <style> tag method. Screenshots were shared showing the before/after states and the button width issue.
Hi!
Disclaimer: I am super new to coding so please bare with me as I know almost nothing 
I am wanting to make the image slides on my mobile site look the same as my desktop site where the words and action buttons are are overlaying the slide image on the mobile site instead of showing up underneath the image, if that makes any sense. What is the coding to do this? and where does it go within my stores code?
Thank you!
my website URL is: safetykeysto.com
Current theme: Minimal
Hi @whyter
May I suggest to update code these steps:
.slides__text-content .slides__title,
.slides__text-content .slides__btn{
display: block!important;
}
.slideshow__mobile-text-container {
display: none!important;
}
apologies for the delayed response, I was out of town. Instead of theme.scss.css, I see theme.scss.liquid. Can I paste the same code?
Hi @whyter
Yeah,
Okay so it worked on the mobile site, but the button on the website is now the entire width of the slide, whereas before the button was small so you could see more of the background image. I have attached pictures. Is there anything I can adjust in the code to make it so the button is the smaller size on the website, but the mobile site remains changed? Thank you!
Hi @whyter
sorry, It should be code below
slides__text-content .slides__title{
display: block!important;
}
.slides__text-content .slides__btn{
display: inline-block!important;
}
.slideshow__mobile-text-container {
display: none!important;
}
Hello
what to do if no theme.scss.liquid file? thanks…
Hi,
If you don’t have theme.scss.liquid. You can add to end of Layout/theme.liquid before tag and wrap code inside tag.
