[SOLVED] Responsive logo prestashop 1.5.

[CondonesDeMarca]

Hi guys,

 

Firstly, thank you in advance to everyone who help to others like me in this community because I have got always very good solutions for the issues I have everyday with my shop.

 

On the other hand, sorry if my english is not perfect (I'm spanish) but I will try to explain my problem in the best way. The reason to post the issue here is because in the spanish prestashop forum, I have not found anything related to my issue and to be honest, there are much more movement here

 

 

I would like to make my logo 100% full width to any screen, I mean, if you for example enter to my website using a tablet with smaller screens than a computer you will see my logo covered from the right because now the logo is not responsive and I would like it fits all screen with a resize keeping the max width for computers with a screen bigger than 1026px

 

I have read this thread before: https://www.prestashop.com/forums/topic/287853-solved-how-to-change-header-logo-size/ but it does not help me at all.

 

I have tested global.css inside my theme and after doing some things I have not got any solution. This is the code I have now:

#header_logo {
    display: block;
    padding: 0px 12px 5px 0;
    min-height: 50px;
    width: 1026px;
    
}

And it fits well just in computer, laptop and in general with screen over 10".

 

Url: www.condonesdemarca.es

Prestashop version 1.5.4.

Theme: leostor from leotheme

 

 

Thank you in advance.

 

Best Regards,

Alvaro

 

Edited April 23, 2017 by CondonesDeMarca (see edit history)

[nadie]

Hi guys,

 

Firstly, thank you in advance to everyone who help to others like me in this community because I have got always very good solutions for the issues I have everyday with my shop.

 

On the other hand, sorry if my english is not perfect (I'm spanish) but I will try to explain my problem in the best way. The reason to post the issue here is because in the spanish prestashop forum, I have not found anything related to my issue and to be honest, there are much more movement here

 

 

I would like to make my logo 100% full width to any screen, I mean, if you for example enter to my website using a tablet with smaller screens than a computer you will see my logo covered from the right because now the logo is not responsive and I would like it fits all screen with a resize keeping the max width for computers with a screen bigger than 1026px

 

I have read this thread before: https://www.prestashop.com/forums/topic/287853-solved-how-to-change-header-logo-size/ but it does not help me at all.

 

I have tested global.css inside my theme and after doing some things I have not got any solution. This is the code I have now:

#header_logo {
    display: block;
    padding: 0px 12px 5px 0;
    min-height: 50px;
    width: 1026px;
    
}

And it fits well just in computer, laptop and in general with screen over 10".

 

Url: www.condonesdemarca.es

Prestashop version 1.5.4.

Theme: leostor from leotheme

 

 

Thank you in advance.

 

Best Regards,

Alvaro

 

 ¿Spanish user?

 

 

In  the header.tpl de template leothemes, change:

 

<div class="span4">
							<a id="header_logo"

by

 

<div class="span12">
							<a id="header_logo"

Before

 

File:

 

https://www.condonesdemarca.es/themes/leostor/css/global.css

Search:

 

 

change

 

 

#header_logo {
	display: block;
	padding: 0px 12px 5px 0;
	min-height: 50px;
	width: 1026px;
	
}

 

by

 

#header_logo {
    display: block;
    padding: 0 12px 5px 0;
    max-width: 100%;
    height: auto;
}

Sorry for my English

[CondonesDeMarca]

Nadie, como siempre eres un crack! Me alegra mucho seguir viéndote por aquí.

 

Y precisamente no abrí el tema en el foro español porque no esperaba recibir ninguna respuesta (dado que tu ya no estás por ahí y el foro español ha decaído mucho desde entonces) y mira la gracia que casualidad que justo me has contestado tu en el tema que he abierto aquí.

 

 

P.D: Por cierto aprovechando el tema, estaba trasteando la forma de hacer la plantilla responsive porque en los módulos tiene uno que hace la función de poder cambiar el template width poniendo por ejemplo 98% y lo que hace es ajustarse en un 98% a cualquier pantalla, el problema es que por ejemplo en pantallas grandes como una televisión (por poner un ejemplo) las imágenes y el slider se ve extendido con espacios en blanco, no tiene un límite en px como por ejemplo ocurre cuando entras en webs como amazon o ebay, ¿sabes si hay alguna solución a esto sin que sea comprar una plantilla nueva responsive?

 

 

Gracias nuevamente,

Un saludo!

Edited April 23, 2017 by CondonesDeMarca (see edit history)

[nadie]

From what you saw in your template header.tpl change span4 by span12 , if you modify the header.tpl,
 

<div class="span14">
							<a id="header_logo"

by

<div class="span12">
							<a id="header_logo"

then in the global.css, simply delete in the #header_logo  this min-height: 50px;
    width: 1026px;
 
Before in the css add
 

#header_logo img {
display: block;
    max-width: 100%;
    height: auto;
}

[nadie]

Nadie, como siempre eres un crack! Me alegra mucho seguir viéndote por aquí.

 

Y precisamente no abrí el tema en el foro español porque no esperaba recibir ninguna respuesta (dado que tu ya no estás por ahí y el foro español ha decaído mucho desde entonces) y mira la gracia que casualidad que justo me has contestado tu en el tema que he abierto aquí.

 

 

P.D: Por cierto aprovechando el tema, estaba trasteando la forma de hacer la plantilla responsive porque en los módulos tiene uno que hace la función de poder cambiar el template width poniendo por ejemplo 98% y lo que hace es ajustarse en un 98% a cualquier pantalla, el problema es que por ejemplo en pantallas grandes como una televisión (por poner un ejemplo) las imágenes y el slider se ve extendido con espacios en blanco, no tiene un límite en px como por ejemplo ocurre cuando entras en webs como amazon o ebay, ¿sabes si hay alguna solución a esto sin que sea comprar una plantilla nueva responsive?

 

 

Gracias nuevamente,

Un saludo!

Yo contestando en ingles xD

 

Me alegro de que se haya solucionado el problema. (No se te olvide añadir la palabra Solucionado al titulo del tema y marcar el botón "mark solved"  en la respuesta que haya sido las solución)))

 

Para el tema del responsive por resoluciones, lo mejor hoy en dia es usar los media query (@media)

 

Me he pasado por el foro estos meses del año y a final del año pasado, pero no creo que pueda pasarme mas, antiguamente pasaba dias enteros por aquí, pero eso no era vida ))))

 

Pregunta la otra duda en un tema nuevo, tambien por el foro ingles, a ver si  te pueden ayudar 

[CondonesDeMarca]

Yo contestando en ingles xD

 

Me alegro de que se haya solucionado el problema. (No se te olvide añadir la palabra Solucionado al titulo del tema y marcar el botón "mark solved"  en la respuesta que haya sido las solución)))

 

Para el tema del responsive por resoluciones, lo mejor hoy en dia es usar los media query (@media)

 

Me he pasado por el foro estos meses del año y a final del año pasado, pero no creo que pueda pasarme mas, antiguamente pasaba dias enteros por aquí, pero eso no era vida ))))

 

Pregunta la otra duda en un tema nuevo, tambien por el foro ingles, a ver si  te pueden ayudar 

 

Al principio del tema puse que era español y pedía disculpas si mi inglés no era el mejor

 

Respecto a este otro tema, haré lo que me has dicho pero para verlo bien creo que lo mejor es entrar de manera personal para ir viendo los cambios.