Problemas de adaptabilidade do design responsivo no celular

Hola, maquete mi sitio tipo responsive design para que se adapte ya sea a una pc de escritorio, tablet o movil, el tema es que al achicar el navegador se adapta perfecto pero al ingresar desde mi celular Sony Xp M se va muy mal... pero si tildo la pestaña ver como ordenador, se ve muy bien

Me estoy pasando algo por alto seguramente...

Entra desde incógnito en tu navegador del móvil. Si se sigue viendo mal, entonces es que no lo hiciste bien el responsive.

El responsive no esta hecho para tu celular, o solo has hecho responsive en base a 1 modelo y son varios los que se debe hacer. Aunque también se puede hacer para cada dispositivo mobil pero eso es mas trabajoso y solo para webs donde sus visitas provengan de tal dispositivo.

Prueba con el sitio Testing responsive web design in various resolutions | ResponsiveTest

Ahí puedes ver como se aparecería tu sitio en iphone, samsung, blackberry. Porque si el problema es solo para tu marca de teléfono no sería gran inconveniente.

Si funciona en el escritorio pero no en el smartphone es posible que no ayas agregado el veiwport

<meta name="viewport" content="width=device-width, user-scalable=no">

O simplemente les media queris que usaste no funcionan para tu smartphone y habria que cambiar los breakpoints.

espero funcione

Antes que nada muchas gracias por sus respuesta. Me ayudaron a darme cuenta que había maquetado mal el menu ya que elimino esa parte y funciona muy bien.

Parece una pavada, pero por ahí uno se marea un poco con el código y comentarios como los que me brindaron ayudan muchismo

Gracias esativo por sugerirme el sitio para testear sitios. Me será de gran ayuda.

Un saludo y muchas gracias por su ayuda

Te faltó esto: <meta name="viewport" content="initial-scale=1">

Tienes que manejar el css responsive por media es decir: [MENTION=16931]medi[/MENTION]a (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ } [MENTION=16931]medi[/MENTION]a (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ } [MENTION=16931]medi[/MENTION]a (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ } [MENTION=16931]medi[/MENTION]a (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } [MENTION=16931]medi[/MENTION]a (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } [MENTION=16931]medi[/MENTION]a (min-width:1281px) { /* hi-res laptops and desktops */ }