Logo for Android phone

[MizzMaz]

I have added a logo using - Improve >Theme & Logo > Header logo - and whilst it looks great when viewed through a desktop or laptop it is tiny on an android phone.  Is there a separate version for a mobile phone please?

Thank you,

Marilyn

[MizzMaz]

Where do I upload this version from for the mobile phone please?  I haven't been able to find a module.

 

Thank you,

Marilyn

[MizzMaz]

There is the option to enable or disable the mobile phone module but nowhere to increase the size of the logo for the mobile phone which is what I am trying to find out about

 

Thank you  

[razaro]

Hi Marilyn

I am assuming that your logo may be small because of layout that your theme have on mobile.

Can you provide link or screen-shot, that would be helpful. 

But in general you can add bit of CSS, in your theme, to fix logo size. There are media queries so 

styles can be applied just for mobile. There is no setting to change logo size just on mobile. But that 

also depends on theme you are using.

[MizzMaz]

Thank you for your reply.  Here is the link - https://mywebsitepages.com/ I am using the Classic theme.

Any help you can give me would be wonderful,

 

Marilyn

[razaro]

Thank you for sharing link.

Your logo is more vertical oriented and you see there is lot of empty space below menu. Side-note, your log dimensions are huge, though image file is not that heavy.

But you can reduce image by 50% at least.

Now for mobile it is small because Classic theme is made for horizontal logos that fill nicely that space on mobile. And in theme styles height is limited to 50px.

So that is reason why your logo is small. To adjust that you would have to change bit of styles. You can do that by editing custom.css in theme/assets folder and adding this code.

/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

@media (max-width: 767px) {
    #header .header-nav .top-logo {
        text-align: center;
    }
    #header .header-nav .top-logo a img {
        max-height: 170px;
    }
}

That should display image similar like in attachment. So centered and 170px. If you do not see changes clear PrestaShop and browser cache.

Again note it takes lot of space, and pushes content down. So think maybe of alternative logo where text could be on side. Also there are lot of themes

or layouts that do work with bigger vertical logos. Mostly centered and menu and links around it.

 

[MizzMaz]

Thank you so much razaro that worked a treat 😁