Plantilla joomla responsive

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

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

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

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

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

/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;}
}

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

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

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

CREO QUE NO,

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

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