Carrousel caption bug

[kr]

Hi guys,

I am having some issues with the captions on mobile with the carrousel using mix-blend-mode: difference, seems that it's not responding after a couple of slides, could you please take a look at that, thanks!

Carrousel example:
https://kristinrosch.com/2021-2

[Richard]

Dear @kr

You just needed to add #custom-phone-grid to the other elements nested within, that why the first one ( span-29 ) works :)

#custom-phone-grid .span-29{
        mix-blend-mode: difference! important;
}


#custom-phone-grid .lay-carousel-sink-parent{
        mix-blend-mode: difference! important;
}

#custom-phone-grid .single-caption.ix-3{
        mix-blend-mode: difference! important;
}

#custom-phone-grid .single-caption.ix-4{
        mix-blend-mode: difference! important;
}

p{
        mix-blend-mode: difference! important;
}

a{
        mix-blend-mode: difference! important;
}

Also,
If you are declaring one after the other like this; you can group the CSS under #custom-phone-grid then use a comma ','

#custom-phone-grid .span-29, .lay-carousel-sink-parent, .single-caption.ix-3, .single-caption.ix-4, p, a {
    mix-blend-mode: difference! important;
}

Hope this helps and best wishes with your project :)
Richard

[kr]

Hi Richard,

thanks so much for your help, also great tipp to group things up!
Unfortunately it's still not working and I cannot spot the mistake here. Do you think it could be a loading problem?

Best,
Kristin

[Richard]

Dear @kr Kristen

On Mobile and Desktop i can see the mix-blend:difference - What part specifically is not working?
What browser are you using?

Talk soon & have a wonderful day :)
Thank you for using Lay Theme!

Best
Richard