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

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.

Voy a probar lo que me comentas....

Hola Jordi.

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

Un saludo

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

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

Saludos,

Ese codigo ya lo tengo puesto:

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

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

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

Hola Jordi.

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

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

Un saludo

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

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

Hola Jordi.

Puedes probar con el siguiente código:

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

}

Un saludo

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

}

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