Thread: Media Queries
View Single Post
Old 12-16-2013, 12:55 AM   #3
eschwartz
Ex-Helpdesk Junkie
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.
 
eschwartz's Avatar
 
Posts: 19,372
Karma: 83251084
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:
  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