Hi all. Head scratcher for you to maybe help me with. For some reason when I view my new Elements site on Mobile (or a small window on my desktop), the swirl from my logo turns sea foam green instead of dark blue. At no point did I ever create a sea foam green logo. If you look at www.astraeamarketing.com on desktop, you’ll see the correct color. On mobile, it appears like the attached screenshot. Any thoughts on what could be causing this color shift? Thanks in advance!
Bob
The SVG image was created in Illustrator with that colour as style defs, which are not being overridden.
Try optimising teh SVG image here and remove the style defs:
The mobile menu uses a separate drop zone, so you’ll need to specify the colour on the SVG in there also…
Thanks, Dan. Odd that it’s coming up green when I never selected that color.
Thanks for the tip. As I mentioned to Dan, odd that that green is in the mix as I never used anything but my logo’s dark blue in Illustrator.
I can see in your source code that the svg you have supplied was designed in that sea foam green, and exported out of illustrator using styles.
Elements can not override that designed colour, in the defs, it its read after the tailwind classes Elements applies for fill and stoke.
I can’t say I have used SVG much in the past so I just exported with the default settings. Thanks for taking the time to provide some guidance on this.
