Actualmente estamos inmersos en el diseño del nuevo sitio web de Ruralka On Road, el cual esperamos que esté en marcha a finales del mes que viene, y en el que nos hemos encontrado con un importante problema con el conocidísimo plugin para WordPress Slider Revolution.

La verdad es que la resolución del mismo nos ha hecho perder no poco tiempo y estamos seguros de que a más de uno le ha surgido el mismo problema pero, y esto es lo más curioso, no hemos encontrado ningún tipo de solución publicada en ningún centro de soporte o foro especializado.

Descripción de los problemas

El proyecto de Ruralka On Road se está realizando sobre la no menos conocida plantilla para WordPress Avada y en el mismo necesitamos añadir en la página de inicio un slide a pantalla completa, lo que a priori no implica ningún tipo de complicación, pero el diseño elegido por el diseñador gráfico utiliza un menú lateral izquierdo vertical, en lugar del típico menú superior horizontal. Esta simple elección nos ha generado dos problemas interesantes:

El primero de los problemas generados es que en los dispositivos a partir de los 1.100 píxeles de ancho se muestra el menú lateral izquierdo vertical, pero con el contenido del slide centrado al ancho total de la pantalla, pero no de la parte visible del contenido.

Slider de Ruralka On RoadEl segundo de los problemas generados es que en los dispositivos con menos de 1.100 píxeles de ancho se muestra un menú superior horizontal en lugar del menú lateral izquierdo vertical, lo que provoca que el slide exceda el alto visible de la pantalla.

Soluciones

Primer problema

Lo primero que hicimos fue solucionar el primer problema, que se resuelve con una pequeña porción de código CSS directamente en el propio slide, concretamente en la opción Custom CSS, a la que le añadimos el siguiente código CSS:

Básicamente lo que indica es que si la pantalla tiene como mínimo 1.100 píxeles que mueva la capa que contiene el slide, a la que llamamos #ror_fullscreen, la mitad del ancho del menú lateral izquierdo vertical, en nuestro caso concreto 152,50 píxeles, la mitad de 305 píxeles que es lo mide el ancho total.