Cómo hacer que una diapositiva de contenido horizontal JS de px a% sensible

Esto me está volviendo loco: tengo un poco de jquery que desliza tres divs horizontalmente.

VIOLÍN

Edición 3:Demo en vivo; Sitio web completo que muestra cómo quiero que funcione...hasta Llego a menos de 775px. Por favor, cambie el tamaño de la ventana para ver lo que quiero decir.

EDITAR, por demanda popular. Lo que quiero: en pantallas pequeñas, digamos desde 700 y hacia abajo. Quiero un panel para llenar la pantalla. A la vez

2ª edición:Funciona bien a más de 700px. Debajo de eso Me gustaría que la pantalla muestre solo un panel a la vez, y cuando se desee (un clic en el panel actual), el siguiente panel se deslizará hacia los lados. Es decir. Sin columnas apiladas, que es el clásico diseño responsivo. Por favor vea a Fiddle. Todo está bien hasta que minimice la ventana del navegador o use un dispositivo móvil.

Defino panel1 y panel2 comofixed width, y use un css calc para mantener el tercer panel al 100% menos panel1 (200px) y panel2 (200px):(calc 100% - 400px)

Esto funciona bien, hasta que me meto en pantallas pequeñas. Luego se vuelve loco: los paneles se apilan uno encima del otro verticalmente (quiero ocultar los paneles que no están activos) y, debido a los anchos fijos, "veo" pequeños trozos de paneles aplastados a la derecha. Idealmente, quiero que cada panel llene pantallas pequeñas al 100%.

Con lo que necesito ayuda es esto:

Yo tampoco

Encuentre una manera de reemplazar esta definición JS de la distancia de deslizamiento de píxeles a%

 var margins = {
        panel1: 0,
        panel2: -200,
        panel3: -400,               
    }

..y por lo tanto, ser capaz de hacer mi css calc (100% - 20%) o algo así.

..o, al menos, encuentre una manera de ocultar paneles cuando se encuentre en pantallas pequeñas.

Todos los punteros muy apreciados.