12-15-2013, 08:46 PM | #1 |
Read, don't parrot.
Posts: 224
Karma: 110242
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;} } 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> Much appreciated. |
12-15-2013, 09:02 PM | #2 |
Read, don't parrot.
Posts: 224
Karma: 110242
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> |
12-16-2013, 12:55 AM | #3 |
Ex-Helpdesk Junkie
Posts: 19,421
Karma: 85397180
Join Date: Nov 2012
Location: The Beaten Path, USA, Roundworld, This Side of Infinity
Device: Kindle Touch fw5.3.7 (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:
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 |
12-16-2013, 02:00 AM | #4 |
Read, don't parrot.
Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
Got it, thanks. It works now.
|
12-16-2013, 02:32 AM | #5 |
Ex-Helpdesk Junkie
Posts: 19,421
Karma: 85397180
Join Date: Nov 2012
Location: The Beaten Path, USA, Roundworld, This Side of Infinity
Device: Kindle Touch fw5.3.7 (Wifi only)
|
|
Tags |
kf8, kindle, media queries, media query, mobi |
|
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 |