title: Why does a CSS class seem to be ignored on mobile?
body: <p>I am working on a Wordpress website in which I need to use the musical "flat" symbol. To figure out what might be a good way to handle this, I checked out what is used on Wikipedia, in the corresponding article (<a href="https://en.wikipedia.org/wiki/Flat_(music)" rel="nofollow noreferrer">https://en.wikipedia.org/wiki/Flat_(music)</a>).</p>
  
  <p>I know how to find the HTML entity code and use that, and I know I can just copy the symbol from somewhere else and just paste it directly into my post. But when doing that, there is extra padding around the symbol, so it displays incorrectly, like this: D ♭ . (It's actually not doing it here on SO, so I had to add spaces on each side to simulate it.) It looks like the problem is handled on Wikipedia by the following code, which appears everywhere the flat symbol is used:</p>
  
  <pre><code>&lt;span class="music-symbol" style="font-family: Arial Unicode MS, Lucida Sans Unicode;"&gt;♭&lt;/span&gt;
  </code></pre>
  
  <p>So I used the same code and I created a "music-symbol" class in the CSS file, in which I set padding to 0. I couldn't find the corresponding class on Wikipedia, but I guessed that that's what it contained. I honestly don't know why this works (I'm a noob) but it does seem to work, assuming I specify the font using the style tag as shown. When I say "it works", I mean that it makes the flat symbol appear right next to the note name, as it should, without extra space, like this: D♭.</p>
  
  <p>However, when I view the same site on my Android, the spacing is still there. Can anyone explain why, and how I should address this?</p>
  
  <p>Also, is there a better or more straightforward way of handling special symbols like the flat? I don't get why I was able to paste it in directly here on SO and have the spacing be correct without having to use the extra class reference and style tag.</p>