Responsive custom logo

mailzaforume77

HI all,
I have problem with a custom logo in Ja Simpli template. I'm using custom logo 722x170 px, through theme customizer.
As you can see from first PrtSc on desktop version everything is ok:

But when I switch to mobile view, with Chrome on my mobile phone, and Opera on PC with developer tools I have:

And finally on the PC with Chrome and developer tools:

I have part of custom css code from other threat for logo:

@media (max-width:468px) {
a.logo strong {
   width: 100%!important;
     background-size: 100%!important;

So, my question is, how to get logo responsive on phone view, for all browsers?

Thanks in advance!

aman204

mailzaforume77 Can you provide a link to your site so as to have closer look

mailzaforume77

aman204 LINK

aman204

mailzaforume77 The logo is appearing fine however not scaling fine as the logo image you have added is quite large

1) I would suggest to upload smaller logo image for responsive screen breakpoint as suggested here, too and then, add this media query css to css file along with background-image path change (The height and width value can be taken proportionally as mentioned below):

@media screen and (min-device-width: 320px) and (max-device-width: 480px) {a.logo strong{height:58px!Important;width:278px !Important;background:url(/images/livnoputovi-small.gif) no-repeat;}

2) For the gap appearing below logo, The height reference above should set it fine. Ref: Screenshot

3) Also, You may wish to refer to suggestion provided in forum thread given above

mailzaforume77

aman204
Since I don't have subscription, I can't opet your suggestion from the 1).

I tried to paste your code in /media/ja_simpli/css/custom-styles/20.css and in custom.css, but it didn't work.

aman204

mailzaforume77 I tried to paste your code in /media/ja_simpli/css/custom-styles/20.css and in custom.css, but it didn't work.

Unable to see the above css code reference in your site along with logo image being changed as suggested above. Kindly re-check again

mailzaforume77

Can you pls, recheck it again. I had to remove part with the path to the "small" image, and seems to me now it's working.

aman204

mailzaforume77 Appears fine now. Although, You can change this :

background:url(/images/livnoputovi-small.gif) no-repeat;

background:url(/images/livnoputovi-small.gif) no-repeat !important;

in order to ensure that css declaration supersedes the logo being used for larger screen

mailzaforume77

aman204

Thanks for the replay. With this new part of code, it's working pretty good.