Mobile horiz. scroll - Media Query stylesheet

I used the media query tactic for mobile stylesheets outlined here:

<link href="/css/mobile.css" media="handheld, handheld and (max-device-width: 480px), screen and (max-device-width: 480px)" type="text/css" rel="stylesheet">

And the page mostly looks fine.

I’m viewing it with the Opera Mobile emulator. The problem is, that the screen is stretched further than the available space. All the content is visible in the viewport, but there’s a lot of extra whitespace to the right of the screen.

Setting body to overflow:hidden doesn’t work even if I set a width.

And I went through and did display: none on all my <div>s but the excess space is there whether the content on the page is visible or not.

Is this a bug in the emulator or the opera browser? This is the only popular emulator I could find that was small, easy to use and worked on windows.

Anyone else encountered this problem? The same bug occurs on the examples from the blog post above:

vanishdesign, just one thing to consider: a large majority of mobile devices at this stage do not support CSS3 media queries therefore applying width specific code will not be broadly compatible. It’s a great solution for cutting edge smartphones which can take advantage of the element but apart from the spec being unfinished, the implementation is anything but standardised and / or adopted. Worth being wary that your solution won’t have mass appeal. :slight_smile:


Sorry I don’t have much experience with mobile sites so this may not be much use.

I just downloaded the Opera Mobile emulator and pointed it at the following page which I was using for a quiz to create a layout for the iphone. It seems to display ok on the opera emulator and there is no white space to the side.

It uses a media query and the viewport meta tag to stop the iphone automatically scaling the page.

It may or may not shed any light on your problem though.

Thanks a ton, Paul! I know it wasn’t a simple question at all so I really do appreciate it.

I used this line from the article:
<meta name = “viewport” content = “width = device-width”>
As I’m wary of setting a fixed width.

It did eliminate most of the white space, which is frankly good enough for me. Before, the white space was about 50% of the page width, now it’s down to about 10%.

Thanks again