CSS and media selectors for screen width

[TonyRPH]

I'm rewriting an HTML script I found online to query my Squeezebox Music player for song info etc. to display on screen.

I can get the media selectors to work on my tablet and PC, but all attempts at getting it working on my phone fail - the phone just displays a default resolution regardless.

I have found a script to detect viewport size and my phone reports "width=980, height=460" so I know what resolution I'm dealing with.

But yet, even if I set the media select to variants of the above size, the phone still won't pickup the right CSS.

I have tried clearing cache etc.

If I use the dev tools (or even just change the browser size) the page varies as expected.

Where am I going wrong?

I have setup a test page here - it looks odd as I had to use static data (it normally uses javascript to get all the data from the squeezebox - I have removed all that code for brevity.)

Link to test page here - all CSS is embedded in the page: https://dnsbits.net/test2.html

Script to detect screen size: https://dnsbits.net/test.html

Help anybody?

Thanks in advance.

[maffski]

Try styling the screen how you want it to look on your mobile and then using media queries to adjust the styling on larger devices. Combining some media queries with min-width and others with max can leave you with style combinations you didn't expect.

[TonyRPH]

I think I've been trying too many different permutations, and have managed to 'paint' myself into a corner.

I'm stripping the queries out and starting again, using your advice.