Search code examples
cssmobiletumblr

Header Image Too Wide For Mobile Screens

I have an issue with my header image not being responsive. I've tried the following with no luck: 

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

NSFW - The issue can be seen at http://zarahthegreat.tumblr.com/. The site contains images that may not be suitable for under 18 / 21 year olds and is not safe for work.

Solution

  • To resolve this issue, you need some CSS to tell the header image that its max-width is 100% of the available space. Add the code below to the Custom CSS panel.

    CSS

    body > center > img {

   max-width: 100%;

}