The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Different PCs, same browser, media queries misbehaving

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #166470

    So all the PCs in our office have the latest version of Chrome.

    Our new responsive website (in development) has media queries with the classic breakpoints and orientation references to catch iPad. Lot’s of use of “ems” and #allthethings.

    Here’s the thing though, one XP and one Windows 7 PC render the breakpoints differently to all the rest. And they render them incorrectly. They snap to our “tablet portrait” view at about 20 pixels from the “mobile landscape” breakpoint.

    They should be breaking from the “tablet landscape” layout at around 920 pixel but this isn’t kicking in until 660px. The result is the desktop experience looks squashed and deforms when viewed in browsers from 660 – 920 wide.

    These machines exhibit the same issues in Firefox!
    But every other machine in the office plays nice.

    Is there something whacky going on with these machines at an OS level?

    I see no “zoom” settings set, or anything unusual about their set-up.
    Good and “bad” machines match in tests like this

    Any help or wild theories greatly appreciated.



    Could it be those XP and Windows 7 PC’s have old monitors with small screen resolutions?
    Have you checked them with connecting them to different monitors (, if that is possible of course and are not all-in-one computers …).


    Thanks for the reply Atelierbram,

    The monitor was indeed the reason for the off behaviour. I was tricked by the Windows 7 machine as it had two monitors. One was 1024px high, one 1200px.
    The XP machine had a 1024px high display.

    The “Orientation” references in our media queries were taking the entire screen size and using this to decide what to display. Other media queries (without an orientation reference) work off the browser window size and so were behaving properly (and recalculating when the browser window was resized).

    We added some “or” statements in our media queries covering “desktop” vs “mobile orientation” which fixed the problems. The solution has been in testing since Monday AM and we’re really pleased to have this glitch resolved.

    If we’d still been stuck, your input would have got us on the right track!
    Thanks again!

    ps. The site is now live.


    Thanks for the feedback John. The font is now darker to improve legibility.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.