Carrousel caption bug
-
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 -
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 -
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
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it