Avisos
Vaciar todo

Plantilla joomla responsive  

 
JOSE LUIS
 JOSE LUIS
Prominent Member

Buenas noches, tengo una plantilla responsive y no se que ha pasado que últimamente en dispositivos móviles no se termina de ver responsive. supongo que será a partir de alguna actualización. Qué debo modificar?

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 11/11/2017 11:16 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola José Luis,

Veo que la web de forma general si tiene comportamiento responsive, pero has estado modificando la cabecera y por ejemplo el logo es muy grande, no se ajusta a dispositivos y acaba desbordándose por la derecha lo que afea la estética de la portada (parte superior).

También la caja de búsqueda parece que inicialmente no tenia esa posición.

Hay que tener cuidado con ciertos cambios que se aplican en la plantilla, ya que de no hacerlos correctamente se corre el riesgo de romper el equilibrio y de paso el comportamiento fluido de los elementos en la plantilla.

Saludos

ResponderCitar
Respondido : 11/11/2017 11:40 pm

Cursos Gratuitos WordPress

JOSE LUIS
 JOSE LUIS
Prominent Member

Indícame, por favor, a hacer esos cambios correctamente para que se muestre resposive en los todos los dispositivos.
Gracias

ResponderCitar
Respondido : 12/11/2017 12:42 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola José Luis.

Lo primero que veo es que el logo esta añadido como " background " no se por que motivo lo añadiste así

#rt-logo {
    background: url(/images/logo.png) 100% 0 no-repeat !important;
}

Lo lógico si no quieres que te pasen estas cosas, es que lo añadas desde las opciones de tu plantilla.

Lugo veo que para la clase #rt-logo tienes añadido unos tamaños, al añadirle un tamaño fijo nunca sera responsive ya que siempre te mostrara el mismo tamaño para todas las resoluciones.

#rt-logo {
    width: 534px;
    height: 70px;
}

Lo correcto seria por porcentajes %

#rt-logo {
    width:100%;
    height: auto;
}

En conclusión, eliminar el background: y añadir la imagen desde las opciones de la plantilla y modificar los tamaños de la clase #rt-logo para que cargue por porcentajes.

Un saludo

ResponderCitar
Respondido : 12/11/2017 1:29 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

JOSE LUIS
 JOSE LUIS
Prominent Member

Indícame por favor, los paso para hacer esos cambios. ¿Cual es la ruta para quitar el " background "? o no lo tengo que quitar? Te agradecería que me dieses los pasos

ResponderCitar
Respondido : 12/11/2017 7:03 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola José luis,

Tienes que editar el archivo CSS de la plantilla donde localizarás los estilos que te hemos comentado y que son los que debes modificar para que el logo tenga comportamiento responsive.

La ruta del archivo CSS que pinta esos estilos es:

/libraries/gantry/css/grid-responsive.css

Haz una copia de seguridad del archivo antes de modificarlo, por si acaso modificas erróneamente y desmontas la plantilla.

Saludos

ResponderCitar
Respondido : 12/11/2017 7:20 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

JOSE LUIS
 JOSE LUIS
Prominent Member

/home/sumincaw/public_html/libraries/gantry/css/grid-responsive.css
He entrado aquí y nos encuentro la linea a modificar, lo que hay dentro es esto:
/**
* @version $Id: grid-responsive.css 20941 2014-05-07 19:46:51Z kevin $
* @author RocketTheme http://www.rockettheme.com
* @copyright Copyright (C) 2007 - 2017 RocketTheme, LLC
* @license http://www.rockettheme.com/legal/license.php RocketTheme Proprietary Use License
*/

body {min-width: 100px !important;}
body [class*="rt-grid"] {display: inline;float: left;position: relative;margin: 0;}

.rt-container {width: 1200px;margin: 0 auto;}
.rt-grid-1 {width: 100px;}
.rt-grid-2 {width: 200px;}
.rt-grid-3 {width: 300px;}
.rt-grid-4 {width: 400px;}
.rt-grid-5 {width: 500px;}
.rt-grid-6 {width: 600px;}
.rt-grid-7 {width: 700px;}
.rt-grid-8 {width: 800px;}
.rt-grid-9 {width: 900px;}
.rt-grid-10 {width: 1000px;}
.rt-grid-11 {width: 1100px;}
.rt-grid-12 {width: 1200px;}

.rt-push-1 {left: 100px;}
.rt-push-2 {left: 200px;}
.rt-push-3 {left: 300px;}
.rt-push-4 {left: 400px;}
.rt-push-5 {left: 500px;}
.rt-push-6 {left: 600px;}
.rt-push-7 {left: 700px;}
.rt-push-8 {left: 800px;}
.rt-push-9 {left: 900px;}
.rt-push-10 {left: 1000px;}
.rt-push-11 {left: 1100px;}

.rt-pull-1 {left: -100px;}
.rt-pull-2 {left: -200px;}
.rt-pull-3 {left: -300px;}
.rt-pull-4 {left: -400px;}
.rt-pull-5 {left: -500px;}
.rt-pull-6 {left: -600px;}
.rt-pull-7 {left: -700px;}
.rt-pull-8 {left: -800px;}
.rt-pull-9 {left: -900px;}
.rt-pull-10 {left: -1000px;}
.rt-pull-11 {left: -1100px;}

.rt-prefix-1 {padding-left: 100px;}
.rt-prefix-2 {padding-left: 200px;}
.rt-prefix-3 {padding-left: 300px;}
.rt-prefix-4 {padding-left: 400px;}
.rt-prefix-5 {padding-left: 500px;}
.rt-prefix-6 {padding-left: 600px;}
.rt-prefix-7 {padding-left: 700px;}
.rt-prefix-8 {padding-left: 800px;}
.rt-prefix-9 {padding-left: 900px;}
.rt-prefix-10 {padding-left: 1000px;}
.rt-prefix-11 {padding-left: 1100px;}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
.rt-container {width: 960px;}
.rt-grid-1 {width: 80px;}
.rt-grid-2 {width: 160px;}
.rt-grid-3 {width: 240px;}
.rt-grid-4 {width: 320px;}
.rt-grid-5 {width: 400px;}
.rt-grid-6 {width: 480px;}
.rt-grid-7 {width: 560px;}
.rt-grid-8 {width: 640px;}
.rt-grid-9 {width: 720px;}
.rt-grid-10 {width: 800px;}
.rt-grid-11 {width: 880px;}
.rt-grid-12 {width: 960px;}

.rt-push-1 {left: 80px;}
.rt-push-2 {left: 160px;}
.rt-push-3 {left: 240px;}
.rt-push-4 {left: 320px;}
.rt-push-5 {left: 400px;}
.rt-push-6 {left: 480px;}
.rt-push-7 {left: 560px;}
.rt-push-8 {left: 640px;}
.rt-push-9 {left: 720px;}
.rt-push-10 {left: 800px;}
.rt-push-11 {left: 880px;}

.rt-pull-1 {left: -80px;}
.rt-pull-2 {left: -160px;}
.rt-pull-3 {left: -240px;}
.rt-pull-4 {left: -320px;}
.rt-pull-5 {left: -400px;}
.rt-pull-6 {left: -480px;}
.rt-pull-7 {left: -560px;}
.rt-pull-8 {left: -640px;}
.rt-pull-9 {left: -720px;}
.rt-pull-10 {left: -800px;}
.rt-pull-11 {left: -880px;}

.rt-prefix-1 {padding-left: 80px;}
.rt-prefix-2 {padding-left: 160px;}
.rt-prefix-3 {padding-left: 240px;}
.rt-prefix-4 {padding-left: 320px;}
.rt-prefix-5 {padding-left: 400px;}
.rt-prefix-6 {padding-left: 480px;}
.rt-prefix-7 {padding-left: 560px;}
.rt-prefix-8 {padding-left: 640px;}
.rt-prefix-9 {padding-left: 720px;}
.rt-prefix-10 {padding-left: 800px;}
.rt-prefix-11 {padding-left: 880px;}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
.rt-container {width: 768px;}
.rt-grid-1 {width: 64px;}
.rt-grid-2 {width: 128px;}
.rt-grid-3 {width: 192px;}
.rt-grid-4 {width: 256px;}
.rt-grid-5 {width: 320px;}
.rt-grid-6 {width: 384px;}
.rt-grid-7 {width: 448px;}
.rt-grid-8 {width: 512px;}
.rt-grid-9 {width: 576px;}
.rt-grid-10 {width: 640px;}
.rt-grid-11 {width: 704px;}
.rt-grid-12 {width: 768px;}

.rt-push-1 {left: 64px;}
.rt-push-2 {left: 128px;}
.rt-push-3 {left: 192px;}
.rt-push-4 {left: 256px;}
.rt-push-5 {left: 320px;}
.rt-push-6 {left: 384px;}
.rt-push-7 {left: 448px;}
.rt-push-8 {left: 512px;}
.rt-push-9 {left: 576px;}
.rt-push-10 {left: 640px;}
.rt-push-11 {left: 704px;}

.rt-pull-1 {left: -64px;}
.rt-pull-2 {left: -128px;}
.rt-pull-3 {left: -192px;}
.rt-pull-4 {left: -256px;}
.rt-pull-5 {left: -320px;}
.rt-pull-6 {left: -384px;}
.rt-pull-7 {left: -448px;}
.rt-pull-8 {left: -512px;}
.rt-pull-9 {left: -576px;}
.rt-pull-10 {left: -640px;}
.rt-pull-11 {left: -704px;}

.rt-prefix-1 {padding-left: 64px;}
.rt-prefix-2 {padding-left: 128px;}
.rt-prefix-3 {padding-left: 192px;}
.rt-prefix-4 {padding-left: 256px;}
.rt-prefix-5 {padding-left: 320px;}
.rt-prefix-6 {padding-left: 384px;}
.rt-prefix-7 {padding-left: 448px;}
.rt-prefix-8 {padding-left: 512px;}
.rt-prefix-9 {padding-left: 576px;}
.rt-prefix-10 {padding-left: 640px;}
.rt-prefix-11 {padding-left: 704px;}
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
body {-webkit-tap-highlight-color: transparent;}
.rt-container {width: 480px;}
.rt-container [class*="rt-grid"] {display: block;float: none;position: relative;width: 100%;}
.rt-container [class*="rt-push"], [class*="rt-pull"] {left: auto;}
.rt-container [class*="rt-prefix"] {padding-left: 0;}
}

@media only screen and (max-width: 480px) {
body {-webkit-tap-highlight-color: transparent;}
.rt-container {width: 95%;}
.rt-container [class*="rt-grid"] {display: block;float: none;position: relative;width: 100%;}
.rt-container [class*="rt-push"], [class*="rt-pull"] {left: auto;}
.rt-container [class*="rt-prefix"] {padding-left: 0;}
}

ResponderCitar
Respondido : 12/11/2017 7:54 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola José Luis,

¿Estás comprimiendo CSS y JS en tu plantilla?

Veo que las hojas de estilo de rt-logo estan comprimidas:

/templates/anthe/css-compiled/master-866986fc87d77bcf4c46198d91f0e62e.css

Saludos

ResponderCitar
Respondido : 12/11/2017 8:01 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

JOSE LUIS
 JOSE LUIS
Prominent Member

YO NO HE COMPRIMIDO NADA, SOLO TE HE COPIADO LO QUE HAY DENTRO DE ESTA RUTA:
/home/sumincaw/public_html/libraries/gantry/css/grid-responsive.css

HE ENCONTRADO ESTO,

PERO YO NO SE QUE TENGO QUE CAMBIAR

ResponderCitar
Respondido : 12/11/2017 8:47 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola José Luis,

Me explico mejor:

¿estas utilizando algún tipo de método de compresión de archivo CSS y JS en tu sitio web para mejorar la velocidad de carga de la página?

¿Utilizas plugins como JCH Optimize por ejemplo?

- https://www.jch-optimize.net/downloads.html

Saludos

ResponderCitar
Respondido : 12/11/2017 8:57 pm

Cursos Gratuitos WordPress

JOSE LUIS
 JOSE LUIS
Prominent Member

CREO QUE NO,

ResponderCitar
Respondido : 12/11/2017 9:03 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola José Luis,

Hagamos una cosa, edita desde tu cPanel, Archivos, usando el Administrador de Archivos (opción Edit) el archivo /libraries/gantry/css/grid-responsive.css y al final del citado archivo añade:

#rt-logo {
    width:100% !IMPORTANT;
    height: auto;
}

Guarda los cambios, haz una captura donde se vea exactamente donde lo has añadido y luego prueba a limpiar la caché de tu navegador y recarga la página o ábrela en un navegador que no uses habitualmente (en el ordenador, no en el móvil) y comprueba que el logo se sigue viendo con normalidad.

Si se ve con normalidad prueba entonces en tu móvil, pero antes limpia la caché de navegación de tu navegador móvil.

Saludos

ResponderCitar
Respondido : 12/11/2017 9:40 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

JOSE LUIS
 JOSE LUIS
Prominent Member

MUCHAS GRACIAS, UNA VEZ MÁS HE CONSEGUIDO SOLUCIONAR PROBLEMAS

ResponderCitar
Respondido : 12/11/2017 10:10 pm