- This topic has 3 replies, 2 voices, and was last updated 9 years ago by
.
- Posts
Hi,
I’m having difficulty in resizing my logo for the mobile version of my site, I’m just getting the full-size logo at the moment. I’ve currently got the responsive menu on and the menu collapse value set to 480, and that is working fine. I’ve had a look at the forum and used the Custom CSS plugin to try some of the CSS that’s been suggested to other people here but I can’t get any of it to work. My website is pippihornsby.co.uk. I’m still adjusting it at the moment, so please excuse any faults you might notice.
Any help with the responsive logo or recommendations for different logo sizes would be much appreciated!
Thanks,
PippiHi Pippi
Thanks for reaching out 🙂
Try using this version of your logo and see if that renders a little crisper:
https://purothemes.com/wp-content/uploads/2015/11/pippi-hornsby-logo.png
Try the following at Appearance > Custom CSS for your original question:
/* Logo */ @media (max-width: 680px) { .site-header .site-branding img { max-height: 72px; } }That’s a 20px reduction to the max-height below 680px. Adjust as required. Let me know how that goes.
Hi Andrew,
The code worked fine, but I was still having cropping errors at certain width of screen, so I decided to add some blank space above and below my logo in the image itself, to increase the overall height of the image. This seems to have corrected the issues (I think my logo was too long and thin for the height values to have much of an effect before).
Thank you for your fast reply and your help!
You must be logged in to reply to this topic.