CSS3 Media Queries for targeting landscape on both iphone 4 and iPhone 5
sized sceens
I am having an issue with CSS3 media queries developing a mobile site. The
code below works great on iPhone 5 landscape, but not so good on iPhone 4
and below in landscape mode.
/* Normal css represents portrait */
.test {width:100%;}
/* Flip to landscape (working great on iPhone 5) - not so great on 4s and
below */
@media screen and (orientation: landscape) {
.test {width: 50%}
}
Now i need to keep the above but also target ONLY iPhone 4s and below in
LANDSCAPE mode, as well as all other devices around that screen size.
Can I add another media query to target the smaller screens but also keep
the styles above?
Any help would be great.
Thanks
No comments:
Post a Comment