How to change WordPress logo for mobile

179 views
asked Nov 23, 2013 in Website Builder by DinoGuy (2,130 points)
Hi
My logo image is called in  the file header.php like this
<div class="logo">/"><img src="../img/mylogo.png"/></div>
It is on my stage and it is 100%. When I view my site from my mobile, the logo displays very small. How can I add a logo image just for mobile screens display or fix the logo image size so that it would show right on mobile screens.
I would appreciate any advice on this
Many thanks

4 Answers

0 like 0 dislike
answered Nov 23, 2013 by WebProX (12,200 points)
You can declare the width  in your CSS   just add this to your logo
width: 35px;
or you can use the percentage
width: 35%;
0 like 0 dislike
answered Feb 16, 2016 by mattflintop (140 points)
I have resized my logo on the website as I wanted it fairly large but now when I look at my site on a mobile device the logo is cut off. How do I get the logo to resize for mobile devices. Just as a heads up, I am a brand new blogger and new to the world of CSS. Thanks!
http://www.androidiosguide.com/check-out-safaris-private-browsing-history-using-mac-os-x/
0 like 0 dislike
answered Jan 15 by rsuog (680 points)
edited Jan 15 by rsuog
You can also set up different rules for mobile users via CSS.
For example, @media (max-width:767px){.logo {width:100%;}}
0 like 0 dislike
answered Feb 16 by Swapnil Jadhav (500 points)
Hello DinoGuy,
the best way to resize logo for you mobile view define css rule for mobile for example
@media only screen and (max-device-width: 480px) {
.logo {
max-width:50%;
    }
make sure what is css used for your logo if you are asking for this site
http://www.androidiosguide.com/
then replace--> .logo <--with  -->  hgroup a <--

if you need further help reply me
...