Streaming live at 10am (PST)

Add isolation property to cart container

Hello!

I’m trying to add in the isolation property to stop my cart container applying mix-blend-mode (it’s a child of my menu div which contains images and text that need to have the mix-blend-mode). I can’t seem to get it to work…

I don’t have much coding knowledge so I’m probably missing something basic!


Here is my public share link: https://preview.webflow.com/preview/bp-rg-test?utm_medium=preview_link&utm_source=designer&utm_content=bp-rg-test&preview=9336cb3f4db29b78374de89a80f542b1&pageId=5f4c933f8b5cc2d02d0c5090&mode=preview

Sorry for the bump but I’m really stuck with this and hoping someone could help me! Thank you :slight_smile:

I’ve attached an image that shows exactly what I’m trying to achieve. I know this isn’t a Webflow question it’s more a CSS question but I would really appreciate anyone who might know if this is possible and if so how to do it. Or if it’s just impossible and I have to find a work around.

Thank you!!

Screen Shot 2020-09-12 at 08.37.53|312x500

Okay I’ve figured out that I wasn’t using id=“e” as it explains here.

But it’s still not working.

Here is my code:

<style>
html, body {
max-width: 100%;
overflow-x: hidden;
}
.c-menu-l {
  mix-blend-mode: exclusion;
}
.c-menu-r {
  mix-blend-mode: exclusion;
}
.d-cursor-wrapper {
  mix-blend-mode: exclusion;
}
.d-preloader {
  mix-blend-mode: multiply;
}
#e {
  isolation: isolate;
}
</style>

And I applied the ID ‘e’ to ever single element inside Cart Wrapper.

Is the issue perhaps that Cart Wrapper is not a direct child of the element that has mix-blend-mode applied? Does isolation property only work on a direct child, not a 4th level child?

I am absolutely desperate to solve this. I am happy to pay someone to help me figure this out as I have a very adamant client who does not want a work-around for this.