SevenCubed - 5:41 pm on Nov 3, 2012 (gmt 0)
I have the width 1000px wide, is this the problem?
There is currently no cut and dry solution for mobile but some methods are more flexible than others. If you want to use only one site for both desktops and mobiles you should adopt "em" units of measurement instead of "px". You can apply ems to fonts and element widths and heights. That way, as viewports shrink in width from desktop to mobile sizes the page just collapses vertically without losing its format. It's still not an ideal if your page is image intensive but it's the best of the available options that I have used for my minimalistic design approach.
You will need to define your maximum width for your master container though for desktops such as max-width:95em; -- that will keep your layout from exploding on current desktop widescreens.
Designing like this is somewhat of an inside out way of thinking because traditionally we drew boxes and then stuffed them with content. Whereas with ems you have to think in terms of going from the centre of the box (the text and inner most divs) outward. Ah how about this; using pixels as a unit of measurement confines you to a rigid shoebox whereas ems is like a flexible balloon according to the viewport size.
I will caution you about ems though. If you aren't aware of the shortcoming of nested elements adopting their parent sizes and adding it to there own you can really be left scratching your head in frustration. Apparently there is now a fix for that with the new "rem" unit of measurement but I haven't tried it yet so I cannot comment on it other than to say it doesn't yet work in Internet Explorer 8 so you would need to implement a fallback for that -- too much work as far as I'm concerned. I'll just stick with ems until browser support catches up.
As scooterdude points out, learning to adapt your coding styles to accommodate mobile users is well worth the extra effort these days.
Last point -- pixels are ok on all up-to-date browsers because of the zoom factor -- the CTRL + - feature, but not everyone is aware that they can zoom in and out plus I'm not sure what it's like on mobile. I've seen people pinch and squeeze in or out on mobiles so I guess that's the equivalent? I get by on mobile but by no means an advanced designer so maybe someone can refute what I've said -- constructive criticism is always welcome!