Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #20681

    hi there

    my site is here:

    pwd protected: kgs1234

    my client wants a full width logo for desktop, so i have one that is 140 h x 880 w (i have adjusted some css to make this work), but of course when scaling down to phone sized it is too small

    is there a way that i can load a different logo at that size using the media queries, or is there a way for me to load the long logo in 2 pieces, and then float them left to stack when seen on small devices? please advise

    thanks, jodi


    Open up js/avia.js and replace following line:



    if(isMobile()) jQuery("#top h1.logo a img").attr('src', 'http://my-mobile-logo.jpg');

    and instead of http://my-mobile-logo.jpg use your logo url.


    hmmmm, i edited the avia.js file and made sure that the image path was correct:

    but it is not replacing the logo when i test it on my ios simluator, or look on my android phone; please advise

    thanks, again! jodi


    Try if the replacement code works at all. Instead of:

    if(isMobile()) jQuery("#top h1.logo a img").attr('src', 'http://my-mobile-logo.jpg');


    jQuery("#top h1.logo img").attr('src', 'http://my-mobile-logo.jpg');

    and check if it works. That said I can imagine that the code won’t work with emulators because these emulators often re-size the website after it’s loaded. In this case you might need to wrap the logo replacement function into a setinterval function: to check the screen size on a regular basis.


    sorry for the delay; it did in fact work when i removed the if(isMobile()) element, but when i put it back it still shows the lager logo, even when i test on an ipod touch (no simulator)

    is there something that i can add to my custom.css file instead? thanks again, jodi


    In this case open up wp-content/themes/choices/js/avia.js and at the very bottom of the file insert the code from:

    Then replace following line:

    jQuery("#top h1.logo img").attr('src', 'http://my-mobile-logo.jpg');


    var isMobile =;
    if(isMobile) jQuery("#top h1.logo img").attr('src', 'http://my-mobile-logo.jpg');


    sorry for the delay – that worked! thanks so much :)



    Glad that I could help you :)

    Best regards,


Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘use a different logo for mobile devices’ is closed to new replies.