2

My website does fit to the screens of different devices but my media query styles are not working. The problem is also visible when resizing the wordpress website in an IE browser and when using a windows phone emulator (via IE 11). I've tried many different methods to fix this problem but so far none have been successful. All my media queries are in my main style.css

I've tried:

I'm completely at a loss and frustrated as this hasn't happen with other websites I've designed and built. I'd appreciate any help I can get with this! Thank you.

Community
  • 1
  • 1
Sidders
  • 124
  • 10
  • did you refresh the page after starting the emulation? – DividedByZero Oct 21 '14 at 15:36
  • Yes, I often do a hard refresh (Ctrl+F5?) and clear the cache to make sure. – Sidders Oct 21 '14 at 15:45
  • 1
    try without the `max-device-width` parameter – DividedByZero Oct 21 '14 at 15:51
  • I removed all the references to `max-device-width` but unfortunately that hasn't worked. Thank you for the suggestion though :) – Sidders Oct 21 '14 at 16:02
  • Have you attempted to take out the "only screen" statements? Do the same issues occur if you shorten your queries to @media (max-width:XXXpx) {...}? – meniltiac Oct 21 '14 at 21:44
  • Yes, unfortunately. I changed all the 'only screen' parts to 'all' and shortened it as you suggested but that didn't work. The media queries are not being read by IE 11, as well as the older IE versions so I'm intrigued as to what's causing the problem. – Sidders Oct 22 '14 at 01:39

1 Answers1

2

This problem has now been solved. After deleting and tweaking files and sifting through support forums for answers, I looked at the stylesheet. It turns out I was missing a closing bracket inside a media query.

/Facepalm...

Sidders
  • 124
  • 10