I'm trying to figure out why my responsive design seems to work fine on mobiles but is completely ignored by my sony psp and nintendo dsi.
I have a very simple liquid 2-column design, one column at 15% of the screen and one column 85%. I'm using media queries to detect the size of the screen and then delete a large banner at the top of the page if the screen is less than 767px. However, on the psp and dsi screen the banner still appears.
Here's the code:
/* SMALL screens between 480px and 767px */
@media (min-width:480px) and (max-width: 767px)
{
#container{width:460px;margin:0 auto;background: none}
#largebanner{display:none}
}
In my browser, the banner disappears the moment I resize to less than 767px. On the console screens, the banner always remains.
Does anyone have any ideas what I might be doing wrong? Many thanks for any suggestions!