Logo too big for small screens

Hi,

I know, there is still a post about this topic but there isn't a solution for me.

My logo in the header is very small, but when I resize it with css code, it’s too big for small screens.
I would like to have a smaller logo only for mobile view on small screens. On screens wider than 640px I want to use a bigger logo.
How can I do that? (At demo version it looks perfect! I have replace the „logo-small.png“ with my own logo but then it is too small on the wide screen.)

Could you please post an url to your site?

I have sent you a private message.

Please edit: /templates/gk_steakhouse/css/override.css and add at its end:

Code: Select all

@media (min-width:640px){
   #gkHeaderNav #gkLogoSmall {
       background-position: center center;
       height: 70px;
       width: 200px;
       margin: 0 0 0 -100px;
   }
}


Remember to enable "CSS override" in template settings - advanced section.

Ps - if you would like to increase the size even more just remember to set last margin value to half of selected width (with negative sign).

Thank you! It looks perfect

Is there anything else I can help you with regarding this topic?

Hmm .. on PC it looks perfect but the Logo on Smartphone is a little bit too small, where can I resize it?

Thank you for your request!

Please use this code in override.css:

Code: Select all

#gkLogoSmall.cssLogo {
    height: 70px;
    margin-top: 3px!important;
    width: 112px;
}


Now modify width/height/top spacing to your liking.
Ps. Place this declaration before previous one.

Thank you very much!

Is there anything else I can help you with regarding this topic?

Yes, please!

When I open the website with Internet Explorer the logo is very small! How can I fix this?

Thank you in advance!

What version of IE?

Internet Explorer 11

It seems to me, that the IE doesn't adopt some code from override.css! The Logo is too small and a button isn't centered!

Is the issue only with ie11 or any uther browser too? (I'm on a Mac so testing IE11 is quietly difficult).

It's only with IE!
Have I wrote something wrong in override.css?

Guys at Microsoft simply doenst care about web standards...
Please check if this code helps:

Code: Select all

#gkLogoSmall.cssLogo {
    height: 70px !important;
    margin-top: 3px!important;
    width: 112px !important;
}


Yes - it's annoying!
Unfortunately not!
When I changed it, all browsers looks like IE :-/

Ok, then remove the change and add !important do @media definition (all 4 lines from screenshot)

I tried it, but it doesn't change anything! (I should change it in override.css or?)

Yes, exactly in override.css

Yes I did it - but the problem is still the same...

I guess the problem might be in your override.css. There is a first @media section open, but I can't see its closing, while inside next @media section opens. Please recheck the override.css file again, fix errors and try again.

I'm embarrassed! Thank you very much!!!

Don't worry, mistakes happens. I could suggest you to use indentation in the code:

Code: Select all

@media (xxxx){
    #selector {
        width: xxx;
    }
}


this way it is clearly visible if something is missing.