How to have a different logo on mobile view
-
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?
The blog I need help with is: (visible only to logged in users)
-
Hi there,
I wonder you did it, didn’t you? I saw in web inspector you are using different logo on small screen.
-
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; } } -
I see.. Lets try to use this css;
.header-full-width.header-image .site-title a{ background-position: center bottom !important; } -
- The topic ‘How to have a different logo on mobile view’ is closed to new replies.