Debut theme - Text appears beneath slideshow and Background Overlay does not appear in mobile only.

[BeEncouraged]

Hi,

I'm using the Debut theme and I added a slideshow with Overlay selected and text appearing on top of the image. This design is working fine for the desktop view however when I switch to the mobile view, the overlay is not visible and the text is appearing below the slideshow instead of on top.

Could you help me get to the bottom of this? Thanks for your help in advance.

Website is live: https://beencouragedtees.com

[diego_ezfy]

Do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

@media (max-width: 749px){
    [id] .slideshow__title, .slideshow__subtitle{
    display: block;
 
}

[id] .slideshow__overlay{
   display: block;

}

[id] .slideshow__arrows--mobile ~ .slideshow__text-content--mobile,
[id] .slideshow__title--mobile,
[id] .slideshow__subtitle--mobile{
    display: none;
}

[id] .slideshow__overlay::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #d4af37;
    opacity: 0.4;
    z-index: 2;
}
}

Keep in mind that the overlay color for mobile needs to be changed manually if you ever change the yellow color. Just change the  #d4af3 code to any hex color you wish.  

Please let me know whether it works.

Kind regards,
Diego

[BeEncouraged]

Thank you so much!!! This worked!!

[diego_ezfy · Accepted solution]

@BeEncouraged You're welcome!

Please don't forget to click on the button "Accept as Solution" below my answer to help other people in the community with similar issues in the future.

Kind regards,
Diego