Reply To: First RWD – Media Queries not working on some phones

[paulob]

That looks way to complex for what is essentially a simple site.

Forget about devices and device width and make your layout work throughout the range on the desktop first (device width and layout width are not the same thing and bear no relation to each other anyway).

At the moment on the desktop anything below 1000px width in the browser is either broken or has a large vertical scrollbar.

What you are essentially interested in is layout width and this essentially covers all devices automatically. No need to target handheld in your media queries as indeed that probably confuses the situation even more. No need to cater for min and max width in the same media query but just over-ride in successive media queries.

Simplify and then simplify some more :)

Don’t target devices but create a design that goes from small to large in your desktop browsers and in most cases that will collect all devices on the way. Apply breakpoints with media queries at points where the design needs it and not where you think a device will sit. There are too many devices and too many widths to cater for individually so cater for them all with a design centric approach and collect them all on the way automatically. If you use max-width (or min-width if mobile first) media queries you cater for all devices automatically including their orientation changes.

See my answer here to a similar problem in another thread.