Debut theme slideshow mobile text overlay

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
455 80 98

@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
Messenger: @sarhov
Telegram: @sarhov
0 Likes
New Member
3 0 0

I have it on the light version

 

thecocktailsociety.myshopify.com

 

 

Thank you

0 Likes
Shopify Partner
455 80 98

@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
Messenger: @sarhov
Telegram: @sarhov
2 Likes
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
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! 

1 Like
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
Tourist
5 0 1

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

1 Like
New Member
1 0 1

Hello there!

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

1 Like
New Member
1 0 0

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

0 Likes