How to have a different logo on mobile view

• 

  caspercreations1986 · Member · Nov 4, 2015 at 9:06 pm

  • Copy link
  • Add topic to favorites

  How can I change my logo to another smaller image when my website is being viewed on a mobile or tablet and hide the logo used on desktop browsers?

  http://www.caspercreations.ie

  The blog I need help with is: (visible only to logged in users)

• 

  nizamilputra · Member · Nov 5, 2015 at 4:02 am

  • Copy link

  Hi there,

  I wonder you did it, didn’t you? I saw in web inspector you are using different logo on small screen.

• 

  caspercreations1986 · Member · Nov 5, 2015 at 5:05 am

  • Copy link

  Hi yes I did do it, but having another problem now…

  How do I remove the gap between the logo and the main container like on the desktop view – I tried setting the margin’s and padding’s but nothing seems to be working for me…

  This is how I fixed the logo problem for future reference for anyone…

  @media (max-width: 480px) {
  	.site-title a {
  		background: transparent url("http://caspercreations.ie/awning1logomobile.png") no-repeat scroll 0 0 !important;
  		overflow: auto;
  	}
  }
  
  }
  
  @media (min-width: 480px) and (max-width: 768px) {
  	.site-title a {
  		background: transparent url("http://caspercreations.ie/awning1logotablet.png") no-repeat scroll 0 0 !important;
  		display: block;
  	}
  }

• 

  nizamilputra · Member · Nov 5, 2015 at 5:42 am

  • Copy link

  I see.. Lets try to use this css;

  .header-full-width.header-image .site-title a{
    background-position: center bottom !important;
  }

• 

  caspercreations1986 · Member · Nov 5, 2015 at 11:29 am

  • Copy link

  That did it so! Thank’s your a genius!

  Lucy