0

I am trying to target specific devices with media queries but I can not get the styles to work. An example I am trying in a test environment is targeting an iPhone 5 like this:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px)
and (orientation : landscape)  {
.our-aim, .freedom, .quote, .bullet-list {
font-family: "aktiv-grotesk-std-i3","aktiv-grotesk-std",sans-serif; 
font-style: italic;
font-weight: 300;
font-size: 1.2em;
}
}
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 568px) 
and (orientation : portrait) {
.our-aim, .freedom, .quote, .bullet-list {
font-family: "aktiv-grotesk-std-i3","aktiv-grotesk-std",sans-serif; 
font-style: italic;
font-weight: 300;
font-size: 1em;
}
h2 {
    font-size:1.5em;
}
}

Is this wrong?

Can anyone help?

Steve Joiner
  • 493
  • 2
  • 9
  • 21
  • 1
    You should also consider device pixel ratio in your queries. Possible duplicate of: http://stackoverflow.com/questions/12539697/iphone-5-css-media-query – Marian Kmet Feb 21 '14 at 13:47
  • Is there a reason for targeting specific devices? Media queries aren't really meant to do that, though it is sometimes possible (but often fragile). – nwalton Feb 21 '14 at 18:42

0 Answers0