Bullet points appearing in a different color on mobile

Site URL: https://www.mentalhealthfirstresponders.com/infancy-through-middle-childhood

Would love if someone could help me with this problem I am having.

I styled my bullet points to be pink squares on this site. It is showing up correctly on desktop, but when I view in mobile (iphone) it is displaying them in black. Not sure why this is happening. The bullet points on mobile should look like the image attached.

Here is a page where this is happening: https://www.mentalhealthfirstresponders.com/infancy-through-middle-childhood

Does anyone know of a fix for this?

Any help would be great!

Thanks,
Gisela

I figured it out.

Hi. Can you share the solution for other members? Thank you.

Hi,

im having the same issue here. Can you please share how you managed to sort it.

thanks :)

On 8/12/2021 at 3:54 AM, moesenusi said:

Hi,

 

im having the same issue here. Can you please share how you managed to sort it.

thanks :)

Can you share link to your site? We can take a look

Hi @tuanphan

I'm having the same issue and can't figure it out - can you maybe help?

Site link: https://spielend-lernen.squarespace.com/legasthenie
PW: lernen

Thanks very much,
Natalie 

On 2/8/2022 at 7:06 PM, digitalnomadin said:

Hi @tuanphan

I'm having the same issue and can't figure it out - can you maybe help?

Site link: https://spielend-lernen.squarespace.com/legasthenie
PW: lernen

Thanks very much,
Natalie 

Hi. What it should look like? Current I see this (Windows/Chrome)

I have observations but no solution.

This is what it looks like on Chrome/macOS. It also looks the same on Safari/macOS.

On Safari/iOS.

On 2/13/2022 at 4:06 AM, creedon said:

I have observations but no solution.

This is what it looks like on Chrome/macOS. It also looks the same on Safari/macOS.

On Safari/iOS.

 

I think the symbol, add in Mac, won't work on Windows (I use WIndows)

4 hours ago, tuanphan said:

I think the symbol, add in Mac, won't work on Windows (I use WIndows)

Some of my reading suggested just that. I think the solution for the actual symbol, not the color issue, was to use a unicode character. Something like...

content : '\2024';

But then there may be all kinds of fiddling needed to get everything to look good.

Thanks very much for your replies @tuanphan and @creedon.

In the meantime I found out that it's no issue on android - only on iOS - seems to be a system issue, not a browser issue.

I will take another look at the unicode version but we might have to live with this.