Logo Mobile version issue and solution

I had an issue with a logo in mobile version of a site I'm working on, but I just solved at this way with override.css.

Code: Select all

#gkLogo img {
    display: block;
    height: 62px;
    margin: 0;
    max-width: 300px;
    width: auto;
}

Which becomes

Code: Select all

#gkLogo img {
   margin: 0;
   position: relative;
   top: 50%;
   transform: translate(0, -50%);
   height:auto;
   width:auto;
}

Hello,

I suggest to change your code to:

Code: Select all

#gkLogo img {
   margin: 0;
   position: relative;
   top: 50%;
   -webkit-transform: translate(0, -50%);
   -moz-transform: translate(0, -50%);
   transform: translate(0, -50%);
   height:auto;
   width:auto;
}

Because some older browsers still can need prefixes to work with the transform property properly.

Thanks for the hint @Tidy