Issue with logo (rendering size) (Solved)

[calgaryx]

Hi there.

Few days ago i installed Prestashop 8.2.

It is really good software.

I use default theme (Classic) that came preinstalled.

They look good. I like them.

But i am having some issue with my logo on desktop and mobile device.

It does not matter what size u upload it will render to smaller size. Original size is 373x102 but render to 160x44px on desktop version and even much smaller on mobile version (84x24). 

Then my logo look really small.

I have installed (Classydevs Custom CSS and JS ) module. 

I would like to have on desktop (279x76 px) and (186x51 px)  on mobile.

How do i can that please.

Any idea, suggestion please. 

Thanks

 

 

 

Edited November 18, 2024 by calgaryx
Solved (see edit history)

[Prestashop Addict]

In classic theme logo largest width is 190px, if you want more you need to change template

[calgaryx]

16 minutes ago, Prestashop Addict said:

In classic theme logo largest width is 190px, if you want more you need to change template

Thanks for your replay.

I set 190px width for desktop. It looks much better.

But i am having problem with mobile device.

This is my css breakpoints for mobile.

#header .logo {
    max-width: 190px;
  
}
@media (max-width: 989px) {
    #header .top-logo img {
      max-width: 190px;
       max-height: 2.7rem !important;
    }
  #header .top-logo img {
       max-width: 190px;
        max-height: 2.7rem;
    }
}

 

my website https://www.melekkitchen.com

Any idea or suggestion for mobile device please?

Thanks

 

[Prestashop Addict]

Can't access to your website, cloudflare blocks 😞 

[calgaryx]

37 minutes ago, Prestashop Addict said:

Can't access to your website, cloudflare blocks 😞 

Sorry about that. i have allow only USA and Canada. 

Can you try now i just unblocked.

Thanks

[Prestashop Addict]

If you have a vector version of your logo you should create it at the right size 190 x 52 (remove padding in css of #_desktop_logo) Because large image containing text in png or jpg has a very bad rendering on image reduction 😞 

[calgaryx]

12 hours ago, Prestashop Addict said:

If you have a vector version of your logo you should create it at the right size 190 x 52 (remove padding in css of #_desktop_logo) Because large image containing text in png or jpg has a very bad rendering on image reduction 😞 

Thanks for your help.

I did some css tweaking and worked good.

I just changed line for width to auto and worked good.

This is my new css code.

 

#header .logo {
    max-width: 13.75rem;
}

@media (min-width: 768px) {
    .col-md-2 {
        float: left;
        width: auto;
    }
}

@media (max-width: 989px) {
   #header .top-logo img {
     max-height: 2.7rem;
    }
}

 

 

Edited November 19, 2024 by calgaryx (see edit history)

[Divine]

Don't forget to edit your first post and to add [Solved] in the title