Solved

Making mobile image slide the same as desktop

whyter
Visitor
3 0 0

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

Accepted Solutions (2)

EBOOST
Shopify Partner
661 189 205

This is an accepted solution.

Hi @whyter 

May I suggest to update code these steps:

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

EBOOST_0-1674171733585.png

 


2. Assets/theme.scss.css

EBOOST_1-1674171746345.png

 


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;
}
Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


DONATE


EBOOST

View solution in original post

EBOOST
Shopify Partner
661 189 205

This is an 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;
}
Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


DONATE


EBOOST

View solution in original post

Replies 8 (8)

EBOOST
Shopify Partner
661 189 205

This is an accepted solution.

Hi @whyter 

May I suggest to update code these steps:

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

EBOOST_0-1674171733585.png

 


2. Assets/theme.scss.css

EBOOST_1-1674171746345.png

 


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;
}
Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


DONATE


EBOOST
whyter
Visitor
3 0 0

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
Shopify Partner
661 189 205

Hi @whyter 

Yeah,

Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


DONATE


EBOOST
whyter
Visitor
3 0 0

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! 

Screen Shot 2023-02-06 at 1.43.47 PM.png

Screen Shot 2023-02-06 at 1.45.11 PM.png

  

EBOOST
Shopify Partner
661 189 205

This is an 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;
}
Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


DONATE


EBOOST
zhibaby07
New Member
4 0 0

Hello 

 

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

EBOOST
Shopify Partner
661 189 205

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.

Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


DONATE


EBOOST
zhibaby07
New Member
4 0 0

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

zhibaby07_0-1708352235217.png