Text fade in on slideshow debut theme

[noenshop]

Hello,

can someone help me. I am using the debut theme. On desktop I am using  as lideshow and you can see the text and button fade in. But on mobile screen not. Can I fix this also on mobile screen? I want the text fade in also on mobile screen.

www.noenshop.nl

password: glowyi

Thank a lot!

[dmwwebartisan · Accepted solution]

@noenshop 

Please add the following code at the bottom of your assets/theme.scss.liquid file. This code works for your text animation on a mobile like a desktop.

@media only screen and (max-width: 749px){
.slideshow__slide--active { opacity: 1; z-index: 8; }
.slideshow__slide {transition: opacity 1200ms ease 0s; z-index: 8}
.slideshow__text-content {opacity: 0;transition: 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87);transition-delay: 0.3s;}
}

 Thanks!

[dmwwebartisan]

@noenshop 

I checked both desktop and mobile. It looks the same, can you please provide a screenshot pointing out what you need?

Thanks!

[noenshop]

On desktop the text in the slideshow comes up like a special effect. It fades in. On mobile screen it is solid, it doesnt come up. Do you understand me? If not, I have to make a video about it.

[dmwwebartisan]

@noenshop 

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (max-width: 749px){
.slideshow__slide--active .slideshow__text-content.slideshow__text-content--vertical-center, .no-js .slideshow__text-content.slideshow__text-content--vertical-center {
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.slideshow__slide--active .slideshow__text-content, .no-js .slideshow__text-content {
-ms-transform: translateY(-40px); 
-webkit-transform: translateY(-40px);
transform: translateY(-40px) !important;
opacity: 1;
}
.slideshow__slide--active { opacity: 1; z-index: 2; }
.slideshow__slide {transition: opacity 1000ms ease 0s;}
}

Let me know if this works.

Thanks!

[noenshop]

Thanks for your help! I really appreciate that!

The picture is now fade in on mobile, very nice! Thank you. Can the text also comes up on mobile screen like desktop?

[dmwwebartisan]

@noenshop 

sure, I will check and get back to you.

[noenshop]

Thankyou very much! You are great!

[dmwwebartisan]

@noenshop 

I checked but it can't be done easily with inspecting elements. It will take time. If you can provide me your theme zip file. I will check further what is the problem.

Let me know.

[noenshop]

Oke, how can I give you theme zip file. Where can I find it

[dmwwebartisan]

@noenshop 

You can share Dropbox links or send zip direct via email. You can get my email in my signature. I will provide a solution here so others can take benefits.

Thank you!

[dmwwebartisan]

@noenshop 

Please remove all previously given code and add this new one.

@media only screen and (max-width: 749px){
.slideshow__slide--active { opacity: 1; z-index: 2; }
.slideshow__slide {transition: opacity 1000ms ease 0s; z-index:2;}
}

Let me know if this works.

Thanks! 

[noenshop]

No, it didnt work. Sorry very much. Where I can find zip file to share with you?

[dmwwebartisan]

@noenshop 

You can download the theme. This will send you an email that will have an export link. click on that link, download the zip, and send me.

[noenshop]

Thankyou! I send you an e-mail. Do you received it?

[dmwwebartisan]

Thanks, Yes!

[noenshop]

Do you maybe know how I can get this under the slideshow? So you can switch the picture yourself?

 

 

[dmwwebartisan]

@noenshop 

It comes with the slider setting. You must check with your customizer slider settings.

Hope you get this option.

[dmwwebartisan · Accepted solution]

@noenshop 

Please add the following code at the bottom of your assets/theme.scss.liquid file. This code works for your text animation on a mobile like a desktop.

@media only screen and (max-width: 749px){
.slideshow__slide--active { opacity: 1; z-index: 8; }
.slideshow__slide {transition: opacity 1200ms ease 0s; z-index: 8}
.slideshow__text-content {opacity: 0;transition: 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87);transition-delay: 0.3s;}
}

 Thanks!

[noenshop]

Thankyou very much! It works much better now. Thankyou!!

[dmwwebartisan · Accepted solution]

@noenshop 

This is the solution for slider dots. You can add this in your css file.

/* Code for Desktop */
@media only screen and (min-width: 750px){
.slideshow__arrows {background-color: transparent; margin: 0 auto;}
.slideshow__controls:hover .slideshow__arrows, .slideshow__controls:focus .slideshow__arrows, .slideshow__controls--hover .slideshow__arrows {background-color: transparent; margin: 0 auto;}
.slideshow__pause {display:none;}
.slideshow__arrows .slideshow__arrow-next {display: none;}
.slideshow__arrows .slideshow__arrow-previous {display: none;}
}

/* Code for Mobile */ 
@media screen and (max-width: 749px){
.slideshow__text-wrap--mobile{display: block !important;}
.slideshow__text-wrap--mobile {background-color: transparent;}  
.slideshow__arrows .slideshow__arrow {display: none;}
.slideshow__arrows .slick-dots {line-height: 5px;}
.slideshow__arrows .slick-dots li.slick-active button::before, .slideshow__arrows .slick-dots li.slick-active a::before {color: white;}
}

Thanks!

[noenshop]

It works! Looks much better now. Thankyou for your time and help!