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.
password: glowyi
Thank a lot!
I checked both desktop and mobile. It looks the same, can you please provide a screenshot pointing out what you need?
Thanks!
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.
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!
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?
sure, I will check and get back to you.
Thankyou very much! You are great!
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.
Oke, how can I give you theme zip file. Where can I find it
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!
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!
No, it didnt work. Sorry very much. Where I can find zip file to share with you?
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.
Thankyou! I send you an e-mail. Do you received it?
Thanks, Yes!
It comes with the slider setting. You must check with your customizer slider settings.
Hope you get this option.
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!
Thankyou very much! It works much better now. Thankyou!!
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!