Trying to change the size and position of my logo on the mobile theme

[Johnny2525]

Trying to change the size and position of my logo on the mobile theme.

I dont like the size and position of my logo on the mobile version of my store.

I have been racking my brain trying to figure out how to change this. Where are the files that need to be change or do some need to be added?

 

Please Help!

 

 

Using PrestaShop 1.5.6.0 

[rocky]

You can use Firebug to select the element and find exactly which CSS is affecting the size of the image.

[Johnny2525]

I have been fumbling around with trying to get Firebug to work on my mobile device and it wont work. 

[Teapot Creative]

Hi Johnny,

 

As you have caching on your store, it's hard to tell what file the css resides in, but my guess here would be the global.css file.

 

You will not be able to do much about the size of your logo on mobile as the image currently is, as your logo is over 1000pixels wide and 140pixels high. Your solution here would be to make a version of the logo that only encapsulates your logo and leave the black edges to CSS via background-color on the container. This is because the styling by default will retain the proportions of your image so that it doesn't skew. Your other option would be to use jQuery to do an image replace under a certain resolution.

 

Example:

if ($(window).width() < 468) {
$("#header_logo img.logo").attr("src", "http://newimagepath.com/image.png");
}

Positioning you can use the following code in order to achieve this.

header .fixed_width {
    margin: 0;
    width: 100%;
}

@media only screen and (max-width: 1000px) {
#header_logo img {
    margin-top: 0;
}
}

 This will return the following results (see attachments).

 

Many thanks,

 

Ant.

Edited September 16, 2016 by PrestashopUK (see edit history)