What does this do?

[oiver55]

I was looking up some code to get a certain look and found this.

"@media amzn-mobi" What does this code do?

Here is the whole css.

div.x2{
position:absolute; top:50%; margin-top: -2em; left:0; right:0;
}
div.x3 {
text-align: center;
}
@media amzn-mobi 
{
div.x2{margin-top:30%;}
}

[DiapDealer]

I'll give you a hint what it doesn't have anything to do with.

[Turtle91]

According to W3schools.com:

The @media rule is used to define different style rules for different media types/devices.

In CSS2 this was called media types, while in CSS3 it is called media queries.

Media queries look at the capability of the device, and can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
and much more

Basically it's asking the reader/device if it is an "amzn-mobi"...if it is, then it applies the styling of "margin-top:30%" rather than the "margin-top:-2em". I'm assuming that is because amzn-mobi devices don't support the "position:absolute" styling?? Non amzn-mobi devices would have the x2 div (Chapter head?) start 2em up from the middle of the screen height while amzn-mobi would simply start 30% down from the top.

Cheers,

[Turtle91]

Originally Posted by DiapDealer

I'll give you a hint what it doesn't have anything to do with.

Oooh, oooh, oooh....pick me!


"Sigil!!"

[Notjohn]

It's a "media call" and it's used to distinguish between Amazon KF8 (modern) and Mobi 7 (old) devices. Unlike Apple, Amazon tries very hard not to obsolete its older models, so it still supports the first Kindle, released in 2007. That's an eternity in e-book lives.

For what it's worth, I think it's nutty to force text that far down a "page." I drop my chapter heads 1 em from the top. Works on all devices.

I don't use drop-caps, either, so I've never found a practical use for media calls. I'm sure that more ambitious designers use them all the time.

[oiver55]

Thanks