Ajustar Logo al Ancho de página en pack webempresa Atlas  

Página 1 / 2
 
Jordi
 Jordi
Usuario experto

Buenas a todos,

Tego instalado el Pack Atlas y me gustaria que el logotipo que tego puesto se ajuste al ancho de la pantalla.

No se si lo tengo que hacer por medio de Css y si es asin que poner y donde....

Muchas gracias por todo

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 10/07/2017 7:28 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Sería mejor que evalúes colocar el logo como tal, la imagen que envías es una foto, te lo comento porque te causará problemas en modo responsive.

Si quieres probar con esa imagen puedes usar el siguiente código CSS

.rt-showcase-pattern .rt-container,
.rt-showcase-pattern .rt-container .rt-grid-12{
	width:100%;
}

#gantry_logo-5 #rt-logo{
	background-size:cover!important;
}

Puedes agregar este código al final del archivo:
/provaweb/wp-content/themes/atlas_wp/css/atlas_wp-custom.css

Saludos.

ResponderCitar
Respondido : 10/07/2017 10:45 pm

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

Jordi
 Jordi
Usuario experto

Voy a probar lo que me comentas....

ResponderCitar
Respondido : 11/07/2017 10:40 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Jordi.

Ok, dejamos el hilo en espera por si necesitas retomar este hilo.

Un saludo

ResponderCitar
Respondido : 11/07/2017 10:42 am

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

Jordi
 Jordi
Usuario experto

Saludos,

Ya he puesto el código que me comenta, pero como puede ver en la web no se adapta a la pantalla totalmente....sabe a que se debe?

Muchas gracias

ResponderCitar
Respondido : 11/07/2017 10:49 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Jordi.

El problema es que el logo es muy grande, es una imagen con un tamaño que no es normal para utilizar como logo.

Prueba añadiendo el siguiente código al mismo archivo:

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

Un saludo

ResponderCitar
Respondido : 11/07/2017 11:13 am

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

Jordi
 Jordi
Usuario experto

Saludos,

Ese codigo ya lo tengo puesto:

#rt-logo {background: url( ) 50% 0 no-repeat !important;}
#rt-logo {width: 100%;height: 200px;}

ResponderCitar
Respondido : 11/07/2017 11:19 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Jordi.

Si te fijas en el código veras que aumentamos el tamaño del alto para que se muestre todo height: 250px;

Según la resolución puede variar, si ves que con lo que te pase no se muestra como quieres por favor adjunta una imagen de como lo ves.

Como consejo te diría que no pongas una foto para tu logo, utiliza una imagen.

Un saludo

ResponderCitar
Respondido : 11/07/2017 11:26 am

Cursos Gratuitos WordPress

Jordi
 Jordi
Usuario experto

Ya lo he puesto , pero lo unico que consigo...es agrandar la altura de la imagen de 200 a 250 pixels ... y lo que necesito es que se amplie al ancho de la pantalla..... el "with" no el height.... ya que he puesto 200 para que no tape tanta pantalla....

Tema Foto o Logo... el cliente quiere que sea esta foto...no puede hacer nada al respeto.

Adjunto captura de pantalla para que lo vean

ResponderCitar
Respondido : 11/07/2017 11:31 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Jordi.

Ok, añade lo siguiente a tu archivo custom.

.logo-block {
    margin: 0;
    padding: 0;
}

Un saludo

ResponderCitar
Respondido : 11/07/2017 12:22 pm

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

Jordi
 Jordi
Usuario experto

Hola Pepe,

Ahora si que ocupa toda la pantalla..... muchas gracias.

Ahora que tengo hecho , como aplico para que sea responsive la imagen , o sea como dice el título del tema que se ajuste a las pantallas completamente ?ç

Gracias

ResponderCitar
Respondido : 11/07/2017 12:31 pm
Jordi
 Jordi
Usuario experto

Por lo que entiendo, la image se tendria que adaptar al container o bloque donde está inclustada.... y este bloque adaptarse a la pantalla.

Es correcto lo que digo ?

Se puede hacer?

Muchas gracias or todo

ResponderCitar
Respondido : 11/07/2017 1:09 pm

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

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Jordi.

Puedes probar con el siguiente código:

@media (max-width: 760px) {
#gantry_logo-5 #rt-logo {
    background-size: contain!important;
}

}

Un saludo

ResponderCitar
Respondido : 11/07/2017 3:31 pm
Jordi
 Jordi
Usuario experto

Hola Pepe,

Ahora tengo este codigo y no me funciona

.rt-showcase-pattern .rt-container,
.rt-showcase-pattern .rt-container .rt-grid-12{
width:100%;
}

#gantry_logo-5 #rt-logo{
background-size:cover!important;
}

.logo-block {
margin: 0;
padding: 0;
}

@media (max-width: 760px) {
#gantry_logo-5 #rt-logo {
background-size: contain!important;
}

}

ResponderCitar
Respondido : 11/07/2017 6:02 pm

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

Jordi
 Jordi
Usuario experto

Buenas a todos ,
Primero dar las gracias a todos y comentar que fuciona más o menos con vuestras indicaciones, el código que he puesto es este:

.rt-showcase-pattern .rt-container,
.rt-showcase-pattern .rt-container .rt-grid-12{
	width:100%;
    height:100%;
}

#gantry_logo-5 #rt-logo{
	background-size: contain!important;
}

.logo-block {
    margin: 0;
    padding: 0;
}

@media (max-width: 1500px) {
#gantry_logo-5 #rt-logo {
    background-size: contain!important;
}
 
}

#rt-logo {background: url( http://creativaonline.cat/provaweb/wp-content/uploads/logo-dalt-1.jpg ) 50% 0 no-repeat !important;}
#rt-logo {width: 100%; height: 180px;}

Pero el problema ahora es otro, al verlo en una tablet o mòbil me sale un espacio en blanco entre el logo y el contenido de la web.... adjunto imagen

ResponderCitar
Respondido : 11/07/2017 6:23 pm
Página 1 / 2