Debut theme slideshow mobile text overlay

Highlighted
New Member
3 0 0

Hi, 

 

I am using the Debut theme and have a slideshow. I am trying to get the slideshow to have the text overlay on the image (as it does for desktop view) on mobile view. At the moment in mobile view the text moves to below the image.

 

Thank you

0 Likes
Highlighted
Shopify Partner
482 86 135

@EmilyTCS 

 

What version of debut theme you are using, because at my end it works properly and showing the text over the image.

Screenshot gif.

 

soaTuHA

 

Maybe you can share live url of your site, so we can check it ?

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
0 Likes
Highlighted
New Member
3 0 0

I have it on the light version

 

thecocktailsociety.myshopify.com

 

 

Thank you

0 Likes
Highlighted
Shopify Partner
482 86 135

@EmilyTCS 

 

The best I can do without direct access  to the codes is provide the following code/solution, please use it the following way.

 

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

3. In the Sections directory, click theme.scss.liquid.

4. Scroll to the very bottom of the file, paste the following code:

 

@media screen and (max-width: 769px){
  .slideshow__title, .slideshow__subtitle {
     display: block !important;;
  }
  .slideshow__text-wrap--mobile{
    display: none !important;;
  }
}

The result is going the be as in the next screeenshot-gif

 

n1NdmQA

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
Highlighted
New Member
3 0 0

Hey Sarhov,

 

That has worked perfectly however now I'm loosing the grey image overlay that makes the text easier to read.

 

Thanks

0 Likes
Highlighted
New Member
1 0 1

Hi there, 

 

just jumping in here as I have been encountering the same problem. 

 

This code seems to have worked, but my 'shop now' button has disappeared, as well as the dark overlay. 

 

see preview:

 

https://s6sq5utr7jvc2su2-4932993114.shopifypreview.com/

 

would really appreciate the help here! 

 

Thanks! 

Highlighted
Tourist
4 1 0

Hi Emily,

 

Did you manage to solve this? I'm having the same issue - the code has worked and scaled the slideshow for mobile but I've also lost the grey overlay to make the text pop in the image.


Thanks

0 Likes
Highlighted
Tourist
6 0 3

Hi @sarhov ,

 

I too lose the Buy it Now button when I add this code. Have you a fix that keeps the button visible?

 

Many thanks

Highlighted
New Member
1 0 1

Hello there!

Anyone found out a solution about the button in slideshow in the mobile version on Debut Theme?

Highlighted
New Member
1 0 1

After fiddling a bit, I came up with a solution of sorts. You may need to mess with some values to get it to work with your image. I use "Medium" slide image height.

 

@media screen and (max-width: 749px){
.slideshow__title {
display: block !important;text-align:center !important;color:#000000;line-height:0.7;padding-top:10px;
}
.slideshow__subtitle{
display: block !important;text-align:center !important;color:#000000;line-height:0.7;
}
.slideshow__text-wrap--mobile{
display: none !important;
}
.slideshow__btn{
display: block !important;margin-top:10px;
}
.slideshow__text-content{
background: rgba(255, 255, 255, 0.5);margin-top:60px;
}
}