Logo Image with Messed Up Width and Height at Different Sizes

[Anonymous]

I uploaded a logo with 600×126, so I can use with retina too!

But, when I specify the maximum height (70px) the image is squeezed:

And still squeezed in a smaller resolution:

Too Big at a even smaller:

And Too Small at mobile:

Basically the CSS calculation is not working very well for Images. So, How do I fix that? 🙁

[Kyle – SUPPORT]

Hi

Please try upload a separate, half-size image for the normal logo. Set the max height to be the exact height of your normal logo

– Kyle

[Kyle – SUPPORT]

Also please provide a link to make it easier for me to resolve

– Kyle

[Anonymous]

In fact is something with the CSS calculation! I solved half of the problem with this:

Full Width Squeezed FIX

.full-center #logo {
    max-width: 100%;
}

#logo.has-img a > img {
    padding: 1px;
}

Low Resolution “Too Big” FIX

#mobile-logo.has-img {
    max-width: 28%;
}

But I can’t solve the “Too Small” issues. I believe the logo (image) CSS needs a review. Maybe something with the “Media Type” rule, ’cause no matter the size, those problems still there with the current CSS.

[Kyle – SUPPORT]

The screenshot that shows the logo on small screens does not look too small to me? The height needs to fit the heigt of the header

– Kyle

[Anonymous]

When I fix the “Too Big” issue, the “Too Small” becomes even smaller:

The header should change the height, just a little bit, so the logo can fit better. Maybe a option to upload a logo specific for Mobile could help.

Oh… and when I change for Bright Design to Bold Design, the logo changes a lil’ bit too.

[Kyle – SUPPORT]

Please could you provide me with a login, it will be quicker for me to sort out for you

– Kyle

[Anonymous]

This reply has been marked as private.

[Kyle – SUPPORT]

That’s not working for me

– Kyle

[Anonymous]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

You’re site is being really slow, it’s hard for me to work on. I’d highly recommend upgrading your host

I’ve added some custom css to make the max width 75%, this should increase the logo size on mobile

– Kyle

[Anonymous]

I see here, but doesn’t solves the “Squeezed” and the “Too Big”.

Would be better work with “Media Type” Rules, so each resolution uses a different size. The current way uses the same for cellphones and some tablets resolutions, that’s the problem. 🙁

And about the speed… I was changing the Options Panel at same time that you, LOL, my bad.

[Kyle – SUPPORT]

I see you’re using the same image for normal logo and retina logo, please do what I said and upload a half-sized logo for the normal logo

– Kyle

[Anonymous]

I upload a new one, smaller, but the “Squeezed” issue only solves with:

.full-center #logo {
    max-width: 100%;
}

And the “Mobile Headers” needs some adjusts of padding, ’cause the current crops the logo borders a little bit and the bottom has no space, so becomes ugly.

But I’ll try to solve all of this here… thanks.

[Kyle – SUPPORT]

I’m not seeing any of these issues, looks perfect to me on all screen sizes (see screenshots)

– Kyle

Attachments:

You must be logged in to view attached files.