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.
[stextbox id=”info” caption=”How to add a piece of code to style.css”]To add some code to style.css go to your WordPress admin tool, press Appearance and then editor. You should now see style.css in front of you, but look in the menu at the right to make sure that you are actually editing style.css. Once this is done copy the code beneath this text and copy it to the very bottom of your style.css, save and hopefully it should work.[/stextbox]
[stextbox id=”grey” caption=”Copy this code to style.css”]img { max-width: 100%; height: auto; }[/stextbox]
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!
2 Responses
Hey,
actualy there is img { max-width: 100%; height: auto; } in my css file. and on mobile version header is not fitting to screen width ;/
That absolutely worked a treat! Was looking for ages, so many many thanks! 🙂