HTML embed CSS styles not being applied in Designer

Design help General
1

Up until recently I’ve had no issues using custom CSS in a “global styles” component on my pages but it looks like that’s stopped working for some reason on a couple projects. Is this happening to anyone else?

The CSS is applied correctly once the site is viewed on the staging domain so I have no reason to believe it’s a syntax issue. It’s most noticeable on the links within my project as I have a style to have them inherit the parent color, however now that the code isn’t applied they’re showing as the default blue/purple.

Edit: Removed the read-only and live site link

2

For anyone else stumbling upon this in the future, it looks like the issue was the use of a data:image/svg+xml encoded svg for a custom external link icon.

The exact code that caused the issue is noted below:

:root {
	--icon-external-link: url('data:image/svg+xml,\
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>');
}

Strangely enough, I needed to completely remove the style from my HTML embed element — commenting it out didn’t fix the issue (which is why I missed it in my troubleshooting).

I ended up using an inline SVG instead and referencing the ID within my after pseudo-class to achieve the same result without any issue :+1:

1 Like