I've styled the mini cart in webflow where the part of the page outside of the cart gets blurred out to draw the user's eye towards the cart. This looks fine in Webflow designer, but when I preview it, the blur effect is only applied to a thinner part along the top of the screen (see images for reference).
I had this resolved earlier, but I can't see to trace back to that version. I checked the CSS, and it has the blur effect in there. This is driving me crazy.
This is probably more of a Webflow question, but open to feedback if it's relevant.
----
On a separate note, I'm wondering if there's a way to wrap multiple divs so that it wraps as if they're a continuous line of text. In the attached example with products, the product name, separator/hyphen, and price are placed in separate divs. This is done because they're all variable text, but I'd like them to behave differently. I believe I set this up correctly in Webflow, but it's not translating in Shopify.
Example #1 –
Current: Mineral Wellness Soak with Eucalyptus – $10.00
Desired: Mineral Wellness Soak with Eucalyptus – $10.00
Disregard. I was able to dig into the CSS file in Shopify to fix the left part of the mini cart though the blur wasn't working properly, so I just removed it.
For the product item, I just removed the separator and kept display as block.
