Menu icon Foundation
Can't call @media "orientation: landscape"

Hi folks,
I am trying to specify my layout for iPad view in portrait and landscape orientation.
Unfortunately, my code does not affect at all.

In my css-file I am trying following:

/* iPads (landscape) ----------- */
@media only screen and (min-width: 40.063em) and (orientation: landscape) {
  section { margin-top: 50px; }
}

/* iPads (portrait) ----------- */
@media only screen and (min-width: 40.063em) and (orientation: portrait) {
  section { margin-top: 150px; }
}

@mediaorientationLandscapeportraitipadmobilequery

Hi folks,
I am trying to specify my layout for iPad view in portrait and landscape orientation.
Unfortunately, my code does not affect at all.

In my css-file I am trying following:

/* iPads (landscape) ----------- */
@media only screen and (min-width: 40.063em) and (orientation: landscape) {
  section { margin-top: 50px; }
}

/* iPads (portrait) ----------- */
@media only screen and (min-width: 40.063em) and (orientation: portrait) {
  section { margin-top: 150px; }
}

This post has been closed. No new replies can be added.

Rafi Benkual almost 5 years ago

Looks like the media query is set up correctly. These classes work on the docs. Let's see the site so we can help more.

Stephan almost 5 years ago

Thanks Rafi,
the code is functioning. You're right. I've done this 100000 times and I still got weird results.
(I thought, I must be wrong in some line of code.)

Well, my web-site is running from my iPads homescreen. And THAT was the problem. It was just a cache-issue. ;)
As usual, the solution is quite simple.

There are some cache-issues in some iOS-Versions. Further reading:
https://discussions.apple.com/thread/3802691?start=0&tstart=0

Cheers
Stephan