logo mobile

the logo looks bad on the phone, how to fix it?


flip the slider, need to be responsive, that bilge


http://quirktools.com/screenfly/#u=http ... h=533&a=34

I wrote this code but it does not work

Code: Select all

#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;
}

Hi

Try add this code to override.css instead:

Code: Select all

@media only screen and (max-width:1150px) {
#gkLogo.cssLogo, #gkLogoSmall.cssLogo {
    background-size: 100% auto;
    height: 150px;
    margin-left: 0;
    margin-top: 0;
    width: 150px;
}
}

@media only screen and (max-width:850px) {
width: 100px;
height: 100px;
}


thanks! I'm gonna try it

Hi

Ok. Please let me know if it worked so I'll either close this thread or will try to come up with a different solution.

No, it did not work

disappeared my logo

Code: Select all

 background: transparent url("../images/style1/logo.jpg") no-repeat scroll 0 0;

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 have the same problem, but my logo is the name of my website and because of that problem it shows half of the name, which is completely incorrect.
Problem accures when the template width is smaller than 640 px.

The given css fix doesn't fix anything.

HI

@fanny0 I do not see my code on Your site and I'm pretty sure there is no line which can make logo disappear. Send me an access to ftp and I'll just apply it myself.

@birletservices above is a fix proposition for specific case. Please tell me Your url and I'll see what can be wrong there.

I had to get that looked cut or simply did not show up ... and placed it was wrong, urgent need a code that funsione

page right now is on-line and in the middle of a campaign which can not afford to leave a code not work for days

I need to solve the problem of logo without having to spend days with css that does not serve me

Please give me a solution

I can not change the whole template just because the logo does not work

urgent need for a solution, please

I need to solve the problem of responsive logo


climbed site elsewhere to see the code that happened to me and it does not serve

eliminates my logo


http://www.publidis.cl/salvemosvitacura3/

Code: Select all


@media only screen and (max-width:1150px) {
#gkLogo.cssLogo, #gkLogoSmall.cssLogo {
    
    background-size: 100% auto;
    height: 150px;
    margin-left: 0;
    margin-top: 0;
    width: 150px;
}
}

@media only screen and (max-width:850px) {

width: 100px;
height: 100px;
}


#gkLogo.cssLogo, #gkLogoSmall.cssLogo {
    background-image: url("../images/style1/logo.jpg" no-repeat scroll 0 0);
     position: absolute;
}
/*
#gkLogo.cssLogo, #gkLogoSmall.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, #gkLogoSmall {
    display: block;
    float: left;
    height: 40px;
    margin: 0px;
    padding: 0;
    text-indent: -999em;
    text-shadow: none;
    width: 124px;
}*/



Hi

Ok. I've just checked and my code worked for screens smaller than 1150px screens, means mobile devices. What You are missing is a code to set a correct logo in site for desktop:

Code: Select all

#gkLogo.cssLogo, #gkLogoSmall.cssLogo {
    background: transparent url("../images/style1/logo.jpg") no-repeat scroll 0 0 / 100% auto;
    height: 150px;
    width: 150px;
}


Sorry. I assumed You will know how to do this.

PS: Next time please do not bump You own thread. It only changes last activity time and moves it to the end of the line to answer.

hi

looks different than I have, in size and position, I need you the way it was in the same place with the same size, looks weird design so, with such a small logo and I think the resolution change also seen blur
http://www.salvemosvitacura.cl/

Hi

Please send me an access to FTP. I'll make it for You.

hi
will send a private message data

Hi

I believe this is the optimal css for logo on Your site:

Code: Select all

#gkLogo.cssLogo, #gkLogoSmall.cssLogo {
    background: transparent url("../images/style1/logo.jpg") no-repeat scroll 0 0 / 100% auto;
    height: 172px;
    margin-bottom: 0;
    margin-top: 21px;
    width: 180px;
}

@media only screen and (max-width:1060px) {
#gkLogo.cssLogo, #gkLogoSmall.cssLogo {
    height: 129px;
    width: 140px;
}
}

@media only screen and (max-width:580px) {
#gkLogo.cssLogo, #gkLogoSmall.cssLogo {
    height: 172px;
    width: 180px;
}

#gkTopNav {
    float: right;
    height: 55px;
    margin-top: -45px;
}

#gkToolbar {
    display: none;
}
}