ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Cardinal
• October 22, 2015 at 11:11 am #222471
  davidll

  Member

  Post count: 205

  Hello

  Read a few posts on here regarding a css change for a different logo on a mobile. I have this issue to resolve, due to the clients logo have a long version (large applications) and a short version (smaller applications).

  So, I found the following:

  @media only screen and (max-width: 980px) {
  
  #logo {
  background-color: transparent!important;
  background-image: url('http://www.url/image.png') no-repeat!important;
  }
  
  #logo img {
  display: none!important;
  }
  

  But it doesn’t replace the mobile version.
  Whats really odd, is that, if I change the (max-width: 980px) to (max-width: 1980px) it shows the mobile version in the main window – but when collapsed, reverts back to the old, large version ! ( i hope that test made sense!)

  Any help would be appreciated

  Thanks

  David

  October 22, 2015 at 12:28 pm #222511
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Have you changed the mobile logo image path url http://www.url/image.png with your image path in code?
  Thanks
  Mohammad

  October 22, 2015 at 4:32 pm #222601
  davidll

  Member

  Post count: 205

  Yes… I can confirm the links correct… I only put dummy text due to it being a local server.
  Also:

  Whats really odd, is that, if I change the (max-width: 980px) to (max-width: 1980px) it shows the mobile version in the main window – but when collapsed, reverts back to the old, large version ! ( i hope that test made sense!)

  October 22, 2015 at 4:34 pm #222602
  davidll

  Member

  Post count: 205

  Also – just noticed – I can confirm also, there is and ending } – for the @media only screen
  Its missing in the above code

  October 22, 2015 at 4:54 pm #222610
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Did you add it? Is it working now?
  Remember to clear the browser cache.

  -Rui

  October 22, 2015 at 5:35 pm #222624
  davidll

  Member

  Post count: 205

  Hello

  Sorry – I think you are miss understanding me:
  I have this code in place:

  @media only screen and (max-width: 980px) {
   
  #logo {
  background-color: transparent!important;
  background-image: url('THE CORRECT URL') no-repeat!important;
  }
   
  #logo img {
  display: none!important;
  }
  }
  

  But it doesn’t replace the mobile version.
  Whats really odd, is that, if I change the (max-width: 980px) to (max-width: 1980px) it shows the *NEW* mobile version in the main window – but when collapsed, reverts back to the old, *STANDARD* version ! ( i hope that test made sense!)

  Any help would be appreciated

  Thanks

  David

  October 23, 2015 at 1:35 pm #222849
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  I’d have to see your site live to look into this

  – Kyle

  October 23, 2015 at 1:35 pm #222850
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  I’d have to see your site live to look into this

  – Kyle

  October 23, 2015 at 1:43 pm #222851
  davidll

  Member

  Post count: 205

  Ok

  I will make it live next week, and provide access
  Thanks

  David

  October 23, 2015 at 1:47 pm #222852
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Ok no problem

• Back to forum

  Posted in: Cardinal