Making mobile image slide the same as desktop

[whyter]

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

[EBOOST · Accepted solution]

Hi @whyter 

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Assets/theme.scss.css

3. Add code below to bottom of file

.slides__text-content .slides__title,
.slides__text-content .slides__btn{
	display: block!important;
}
.slideshow__mobile-text-container {
	display: none!important;
}

[EBOOST · Accepted solution]

Hi @whyter 

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Assets/theme.scss.css

3. Add code below to bottom of file

.slides__text-content .slides__title,
.slides__text-content .slides__btn{
	display: block!important;
}
.slideshow__mobile-text-container {
	display: none!important;
}

[whyter]

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?

[EBOOST]

Hi @whyter 

Yeah,

[whyter]

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! 

  

[EBOOST · Accepted solution]

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;
}

[zhibaby07]

Hello 

what to do if no theme.scss.liquid file? thanks...

[EBOOST]

Hi,

If you don't have theme.scss.liquid. You can add to end of Layout/theme.liquid before </body> tag and wrap code inside <style></style> tag.

[zhibaby07]

You mean like this? Not sure if I am correct...