Hi
I have set up a @media at max-width 500px because that was the only way I could get a Samsung Galaxy Mini to obey the @rules. Thtas has led me to wonder how the @media works for horizontal width. Should I get involved in max hotizontel, or is only the vertical that matters? And if I use only one max width for small phones what is the best width to use?
Thank you
You are missing the point of media queries. Don’t worry about the various devices and their screen widths. Focus on your layout. At what breakpoints does it need to reflow? Focus on those break points, and forget about devices, as there are hundreds of them and they are all different.
Hi ralph
Sorry for the lack of media queries Speak… That’s exactly what my questions were about. Right now all i want to do is create a SINGLE breakpoint, and one of the questions was what max-width should I use bearing in mind that I know that the Samsung Galaxy Mini only responds when i go up to 500px.
The other question was about the horizontal view. Should I worry about that or is the max width only related to vertical screens?
lol I thought we covered this in detail in your other thread 
What Ralph and I are saying is that you forget about your devices altogether. Its pointless to code for a Samsung Galaxy Mini S5570 only because there are hundreds of other devices around and indeed the Samsung Galaxy Mini S5571 (if it were to exist) may have a completely different resolution.
What you should concentrate on doing (and you can do this in the desktop) is to make a layout that works through the whole range from 240px up to a suitable max-width (say 1280px for arguments sake). If you open your browser window 1px at a time throughout this range you will find a point (or many points) where the design doesn’t look good or just doesn’t fit. It’s at these points you throw in your media query and make it look good and then continue right through the range of the browsers width.
With careful planning and a fluid/elastic site you probably only need 4 or so breakpoints throughout the whole range to make everything fit nicely. In this way you have catered for your samsung automatically no matter what its width is.
If you were creating an app especially for mobile devices or a mobile only site then you could detect devices by device-width (which is completely different to max-width) but ths would likely create more problems.
Regarding the vertical height I assume you are referring to rotating the phone around from portrait to landscape? If so then both dimensions still apply to the layout width i.e. when the phone is in landscape you have more width available. This ties in beautifully with the methodology I outlined above because we are device independent the extra width on the landscape version is automatically catered for.
Forget about devices and concentrate on making your layout scale throughout the browser range. I actually gave you a working demo of this whole concept in your other thread and it would automatically have fitted correctly on your mobile.
Sorry if we appear to not answer your question but responsive design is more than knowing the width of one device.
Thanks Paul
I have not ignored the earlier advice and awill keep it in mind for future pages. Whay I am trying to achieve now is to adapt my current ones.
Thanks