It can be really annoying at times when you have a mobile friendly WordPress theme, but somehow your header seems to destroy the mobile friendliness. When watching the theme with a mobile phone you need to scroll towards right to see your entire header image/logo.
I recently had the following problem as I created a new website and it was really annoying. I had bought a mobile friendly theme and it looked perfect, at least until I added my header image which had a 600px width. It looked nice on my computer and laptop, but once I watched it on an iPad and on my mobile phone I had to scroll to see the banner in its full, thus destroying the entire responsive feeling. So, how did I fix this problem and how did I make my WordPress header image mobile friendly?
How I made my WordPress header image mobile friendly
I must admit that this solution is not a 100% perfect solution, but it will solve your problem. It is a piece of code that you need to add to style.css and once added, you should be able to see your problem fixed.
Try this yourself and within a few minutes your site show be 100% mobile friendly and your WordPress header image should be responsive as well. Good luck and if you have further questions and comments, write a comment!
Be aware of the fact that this code will impact all images in your entire blog, making sure that all fit into the design of your site. If you are not happy with the changes this code will make, just remove it!