Mobile Responsive Design Problem

[Awilson089]

I am creating a responsive design for the first time, i have all the media queries in and i am linking to a separate mobile style sheet, i have been using this for testing the site, Click Here and it shows up fine on the iphone and smaller Smartphone test. You can use this link Click Here if you want to test it.

My problem is that when i try to look at it on a real iphone (my iphone 2g) it just doesn’t display, and when i tried to look at it on my small screen Samsung galaxy in opera mini, there is this really weird effect where it displays the mobile version but the page is really zoomed out and it jumps from the mobile version to the normal site really quickly over and over again.

The problem may lie in the media queries or the Meta viewport tag in the head, I’m just not sure why.
Thanks in advance,
Adam

[dany12]

do you use the css3 media query to target a device?

` like for iphone:

only screen and (min-device-width: 480px){}
like for tablet

only screen and (min-device-width: 768px){}

[Awilson089]

Yeh i am :) take a look at the CSS in source view?

[dany12]

Sorry for the long time I had some work but now I can explain to you the basis here it goes
1.When you design for mobile or ipad you will have to acomodate your design in that windows to do this try to float all your elements to the left and stacke them or you can remove unecessary elements form your design in mobile mode.

2.Nested divs with clases will also help you manage all your design

3,Use external js files don't wrote inline code it will be much easier to manage this goes also for css

4.Plugins can act strangelly when you minimize your design you are better offf with learning a jquery slideshow

5.Try to learn and teach others this is the way it should be have fun

If you have any question just ask