I have researched this question all over stackoverflow and I’m still unable to resolve it. Please help if you can 🙂
I’m using the wordpress theme Hatch which includes a media query that doesn’t appear to be affecting any iphones (4 or 5).
Here’s the viewport statement in the html that I’m using:
<meta name="viewport" content="width=device-width, initial-scale=1">
I’ve also tried every variation of a media query that I can think of. Currently, I’m using:
@media only screen and (max-width: 480px) and (orientation:portrait) {
.wrap {
max-width: 300px;
border: 1px solid red;
}
}
I’ve also tried to no avail:
@media only screen and (max-device width: 480px) and (orientation:portrait) {
.wrap {
max-width: 300px;
border: 1px solid red;
}
}
Thanks in advance to anyone who can help with this.
Try using these
in potrait mode
in portrait & landscape
Oh man I am a ding-dong! The problem was that there were mismatched {}’s in the CSS code above the media query.
Lesson: When NOTHING is working like it should and it makes NO sense, it’s almost always something small somewhere in the code. Well sometimes.
Thanks for the help everybody!