[eggheadbooks1]

I've decided to tackle a simple media query for a book I'm working on but I can't seem to get it to work. What I want to accomplish is this: I have discovered that if I put a logo into a frame then Kindle will recognize em values, and I can make the publisher logo scale with the text. However, this does not work on older Kindle devices or on the Kindle for iOS apps, at least not if Kindle Previewer is to be believed.

Thus, I want to embed one logo for KF8 and one for Kindle and iOS devices.

I added to my CSS:

 .default
    {display:block;}
  .mobi
    {display:none;}
  @media amzn-mobi
     {.default
     {display:none;}
     .mobi
     {display:block;}
   }

In my document I put in this:

<div class="Frame" style="text-align:center" media="default"><img alt="logo" class="imageEM" src="../Images/logo.jpg" /></div>

<p class="Publisher" media="amzn-mobi"><img alt="logo" src="../Images/logo1.jpg" /></p>

Problem is, when I check in Previewer, both logos appear onscreen. So clearly I am not doing this correctly. Please advise and correct.

Much appreciated.