Responsive logo on the left of box template

Hi everybody,
Nice template, and quick.
I am having trouble just because I chose logo instead of text and as the text resize perfecly, the logo does not and therefore it is too high on small devices (smartphone, tablets).
Can you help please ?
Here is the issue :

Capture d’écran 2016-05-01 à 11.49.06.png

tablet.jpg

Thanks for your help

Hello,

In the tablet.css please add:

Code: Select all

#gkLogo {
    margin-left: 0;
}
#gkLogo img {
    height: 45px;
}


Thanks very much Tidy, this is working perfectly, but as soon as there is an update of the css, I will have to change again. Is there a solution in the override.css file instead ? That would be much cleaner. Don't you think ? Or is there a global solution that could be great for all of us using a logo instead of text ?
Thanks again for you reply a 1st of May day when we should not work (and above all a sunday!)
Regards
kris

If you want to make sure that none of your changes will be lost during the update, then please put your code (with media query which uses a value for your tablet CSS code) in the template Advanced Settings -> Custom CSS code:

Code: Select all

@media (max-width: 1040px) {
#gkLogo {
    margin-left: 0;
}
#gkLogo img {
    height: 45px;
}
}


Thanks a lot Tidy !
For those who did not understand right away (like me) this code can also be put in the file override.css that is located here : /templates/gk_box/css/override.css instead.
I changed the code to have a bigger logo :

Code: Select all

    @media (max-width: 1040px) {
    #gkLogo {
        margin-left: 0;
    }
    #gkLogo img {
      margin-left: -1px;
      margin-top: -3px;
        height: 68px;
    }
    }

hi,

I have the same problem, my logo does not fit the cell or tablet

I placed code is as follows

my site : http://www.salvemosvitacura.cl/

My code does not work

Code: Select all

#gkLogo.cssLogo {
    background-image: url("../images/style1/logo.jpg" no-repeat scroll 0 0);
     position: absolute;
}

#gkLogo.cssLogo {
    background: transparent url("../images/style1/logo.jpg") no-repeat scroll 0 0;
    height: 180px;
    width: 200px;
   position: absolute;
   margin-left: 50px;
    margin-top: 50px;
    
}
#gkLogo {
    display: block;
    float: left;
    height: 40px;
    margin: 0px;
    padding: 0;
    text-indent: -999em;
    text-shadow: none;
    width: 124px;
}

/*Logo small*/

#gkLogoSmall.cssLogo {
    background-image: url("../images/style1/logos.jpg" no-repeat scroll 0 0);
     position: absolute;
}

#gkLogoSmall.cssLogo {
    background: transparent url("../images/style1/logos.jpg") no-repeat scroll 0 0;
    height: 90px;
    width: 100px;
   position: absolute;
   /*margin-left: 50px;
    margin-top: 50px;*/
    
}


#gkLogoSmall {
    display: block;
    float: left;
    height: 40px;
    margin: 0px;
    padding: 0;
    text-indent: -999em;
    text-shadow: none;
    width: 124px;
}


I had a quick look and I think you forgot something like that : @media (max-width: 1040px) see my code. That is just what I added to have it working properly. I do not understand why you have so much code to add.
Regards
Kris

are those in the template I added what you say, but nothing happens

in this custom css file : /templates/gk_box/css/override.css

yes, in this file

Please just copy and paste my code (changing your url for the logo) replacing your code.
Your code is really different from mine.
I am sorry, I am not a developper, nor a coder (no link with gavick staff), just a simple user trying to work with css. I am not a pro that can help more than that.
Hope it will work. It should.
Regards
Kris

Thanks, but I need you to answer me Gavick staff, its code is different because it is not the same template

Thank you

Works perfectly! Thanks!

Thanks a lot Tidy !
For those who did not understand right away (like me) this code can also be put in the file override.css that is located here : /templates/gk_box/css/override.css instead.
I changed the code to have a bigger logo :

Code: Select all

    @media (max-width: 1040px) {
    #gkLogo {
        margin-left: 0;
    }
    #gkLogo img {
      margin-left: -1px;
      margin-top: -3px;
        height: 68px;
    }
    }