Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > Kindle Formats

Notices

Reply
 
Thread Tools Search this Thread
Old 12-15-2013, 08:46 PM   #1
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 103
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Media Queries

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:

Code:
 .default
    {display:block;}
  .mobi
    {display:none;}
  @media amzn-mobi
     {.default
     {display:none;}
     .mobi
     {display:block;}
   }
In my document I put in this:

Code:
<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.
eggheadbooks1 is offline   Reply With Quote
Old 12-15-2013, 09:02 PM   #2
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 103
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Just tried this and it isn't working either:

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

<div class="amzn-mobi">
  <p class="Publisher"><img alt="logo" src="../Images/logo1.jpg" /></p>
</div>
eggheadbooks1 is offline   Reply With Quote
Old 12-16-2013, 12:55 AM   #3
eschwartz
Irrational Optimist
eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.
 
Posts: 5,305
Karma: 8637834
Join Date: Nov 2012
Location: The Beaten Path, USA, Roundworld, This Side of Infinity
Device: Kindle Touch (Wifi only)
@media amzn-mobi will ensure that all relevant rules are applied to any amzn-mobi's. No need to put media rules in your document.

Currently, what is happening is this:

for example number:
  1. you are using classes "Frame" and "Publisher".

    class="default" is displayed as a block and class="mobi" is hidden. WHEN the doc is a .mobi, this is reversed.

    And neither is applicable, because neither of those classes are used. Therefore it uses the default style for all elements, "body {display:block}" (because obviously).


  2. you are using classes "default" and "amzn-mobi", I am assuming with the same css.

    class="default" is displayed as block, and class="mobi" is hidden. WHEN the document is a .mobi, this is reversed. All this is just like before.

    For the first logo, it will display exactly as you expect, I believe. This is because you added the class="default". The second logo will be displayed regardless. None of your rules apply to it, since you used class="amzn-mobi" instead of class="mobi". The class must match your css element rule, not the media query.

Media queries just choose which extra rules to apply to a document when the style is linked and the media being used, say a Kindle reader, or when the page is printed (if we're talking website pages), matches the rule.


More about media types: http://www.w3schools.com/css/css_mediatypes.asp
eschwartz is offline   Reply With Quote
Old 12-16-2013, 02:00 AM   #4
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 103
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Got it, thanks. It works now.
eggheadbooks1 is offline   Reply With Quote
Old 12-16-2013, 02:32 AM   #5
eschwartz
Irrational Optimist
eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.eschwartz ought to be getting tired of karma fortunes by now.
 
Posts: 5,305
Karma: 8637834
Join Date: Nov 2012
Location: The Beaten Path, USA, Roundworld, This Side of Infinity
Device: Kindle Touch (Wifi only)
Quote:
Originally Posted by eggheadbooks1 View Post
Got it, thanks. It works now.
Good to hear.

eschwartz is offline   Reply With Quote
Reply

Tags
kf8, kindle, media queries, media query, mobi

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Epub to mobi not recognizing media queries srascal Conversion 2 03-25-2013 05:19 PM
Calibre and Media Queries chrlsdrwn12 Calibre 0 12-05-2012 11:16 AM
Media Queries on Kindle Previewer AIR-WIZZ Kindle Developer's Corner 26 10-15-2012 10:10 AM
TWO OPF files or something like Media Queries in the OPF file for KF8 and MOBI? DHahn Kindle Formats 3 04-17-2012 04:06 AM
Kindle Fire woes... indent and media Queries Oxford-eBooks Kindle Formats 11 04-10-2012 10:08 PM


All times are GMT -4. The time now is 04:03 AM.


MobileRead.com is a privately owned, operated and funded community.