Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 8, 2016 at 12:46 am #594696
    denisrowe

    I have followed this example https://kriesi.at/support/topic/different-logo-for-mobile-version/

    With the following CSS

    .logo {display:block}
    .second-logo { display: none; }
    /* iPhone 6 in portrait & landscape */
    @media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
    .second-logo { display: block; }
    .logo {display:none;}
    }

    This does not show the second logon on desktop, but on the mobile is does show the second logo, but does not hide the first (primary) logo.

    March 8, 2016 at 12:52 am #594704
    Yigit

    Hi Denis!

    Please refer to this post – http://kriesi.at/documentation/enfold/change-logo-on-mobile/. Please note that you will be able to see the changes only on actual mobile devices. Resizing browser window on desktop would not show the changes.

    Best regards,
    Yigit

    March 8, 2016 at 1:37 am #594714
    denisrowe

    Thanks I that before however, it does not allow me to change the logo on different devices – say Ipad portrait vs Ipad landscape.

    What defines “wp_is_mobile”

    Denis

    March 8, 2016 at 3:43 am #594734
    Vinay

    Hey!

    The script targets the most common breakpoint for portable devices at 768px (tablet portrait) and 480px (mobile portrait) mode.

    For other breakpoints like iPad landscape etc please use CSS media Queries

    https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    for example 

    /* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

.logo img {
     width:200px!important;
     height:auto!important;
}

}

    Best regards,
    Vinay Kashyap

    March 8, 2016 at 5:58 am #594802
    denisrowe

    I managed to get the effect by editing the css in the browser, but cannot work out what the quick css is to do this:

    I tried

    .logo img a {width:0% !important}
    .second-logo { display: block; padding-right:200px !important }

    But the first line does not work,

    see screenshot – http://1drv.ms/1U9qkUJ

    March 8, 2016 at 7:27 am #594841
    Basilis

    Hi!

    Replace width: 0% with width 0px and let us know if that works better

    Regards,
    Basilis

    March 8, 2016 at 7:49 am #594848
    denisrowe

    Thanks, No same effect with 0px or 0%

    Tried this
    .logo a:img

    Just need the CSS for that one line, works when I edit in the html IMAGE: http://1drv.ms/21istOp

    NOTE: style=”width: 0px;” in the tag

    Denis

    March 8, 2016 at 9:12 am #594882
    denisrowe

    Lots of trial and error I got it thanks. Denis

    Please close off

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Different logo on mobile (code does not hide the primary logo)’ is closed to new replies.