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

Solved
BeEncouraged
New Member
2 0 0

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

0 Likes

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
BeEncouraged
New Member
2 0 0

Thank you so much!!! This worked!!

0 Likes

This is an 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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes