How to change WordPress logo for mobile

asked Nov 23, 2013 in Website Builder by DinoGuy (2,130 points)
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!
0 like 0 dislike
answered Jan 15, 2017 by rsuog (680 points)
edited Jan 15, 2017 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, 2017 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 {
make sure what is css used for your logo if you are asking for this site
then replace--> .logo <--with  -->  hgroup a <--

if you need further help reply me