MyBB Community Forums
[How To?] *************** @media in css ********* - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: 1.8 Support (https://community.mybb.com/forum-175.html)
+--- Forum: General Support (https://community.mybb.com/forum-176.html)
+--- Thread: [How To?] *************** @media in css ********* (/thread-159265.html)



*************** @media in css ********* - broadsword - 2014-09-12

I've added an "@media only screen and (max-device-width : 480px)" section to global.css

The plan is to use this standard css technique to override the normal css rules when a mobile device is detected.

As a simple test, I'm just changing the background colour to check that the mobile device is "seeing" the section within the "@media only screen and (max-device-width : 480px)" area of the style sheet.

It sort of works.

When I land on a test page I see the nice pink background indicating that my mobile device has been detected and the correct section of css has been rendered.

If I switch the device into landscape mode the nice pink background is still displayed...for a while....

After about 5-10 seconds the device reloads the page (without me doing anything) and this time the normal, non-mobile version (with the standard non pink background) is displayed?

I am confused?

Is there some sort of caching going on somewhere?  This should work.

Any ideas?