0

I've seen other questions, but no answer has helped me yet.

I have set a media query to:

@media only screen and (max-device-width: 767px) {
    /* css here */
}

which I want to make the page on phones render the same in both landscape and portrait.

on my 2 available iphone 5's - a 5 and a 5c, portrait works great, landscape totally ignores it.

i've tried the specific landscape orientation tags, and that also fails.

i've also tried setting the max width to 1500px just in case of some retina thing - and that also fails in landscape.

i've run the css through lint - and that didn't find anything all that bad, even. so i think the css is ok (if not lint-perfect).

the site is locked for now till i hear back from my client - so posting a link won't help. But has anyone else seen this issue, and is there any fix out there? When i get back home tomorrow i can try an old Android phone and see what that does. But for now it's driving me crazy!

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Robert Lodi
  • 3
  • 2

1 Answers1

0

Do you have to use max-device-width? because if you change it to use max-width you will keep all the styles up to that size.

The difference between them two is max-device-width if you view the site on a browser and shrink it down it doesn't become responsive but if you use max-width it gives the site a responsive feel when shrinking the browser.

@media all and (max-width: 767px) {
    css in here
}

I prefer using max-width.

The only case I can think of we should use max-device-width rather than max-width is when we need to keep something consistent even when browser window has been re-sized.

saunders
  • 969
  • 4
  • 14
  • 25
  • Good idea and thanks - i also prefer max-width for that reason. In this case, I've tried both though and it only changes how it acts on my computer, not on the phones. What I still don't get is why a max-width of 767 works fine at 320 but is ignored at 480 or 568! – Robert Lodi May 19 '15 at 02:50
  • are you using a framework like bootstrap? could you create a fiddle to replicate the issue? – saunders May 19 '15 at 06:56
  • As it turns out - i could in fact create a fiddle to replicate the problem because I finally found it. I used your idea of changing back to max-width to use in a browser and poked around with firebug when I was more awake - and found whole sections of css that had been duplicated. Maybe the intern helping me added it, maybe I did it and didn't realize when pasting back into wordpress. But i found a whole block of code for the 320 width in the middle of the file, which is why that was working and the code i was adding at the bottom wasn't. For now it's working. Thanks for the help! – Robert Lodi May 20 '15 at 13:06