Recently, I helped my friend Jess with an issue she was facing with her website. Although I no longer code day-to-day, little tasks like this make me feel like I’m still keeping at least portion of my skills! Plus there is no one I’d rather help than Jess!
Her site is WordPress based, running the Genesis theme. The header image on her site wasn’t showing under certain conditions – in certain browsers, on mobile devices. Seems pretty straightforward, until I could not reproduce the problem on any of my devices. If you’ve spent any time troubleshooting technology related problems, you know that it’s next to impossible to fix a problem unless you can reproduce it. Jess was kind enough to let me remote into her computer (one of the places she was having the issue) so I could check out what was going on.
A quick check – of the black space where the header image should have been – in Chrome developer tools, and I immediately saw the problem. There was an odd media query in the site’s custom CSS that was looking for a certain pixel ratio. If the query hit, the correct CSS was being overridden by CSS was pointing to a header image that didn’t exist. Ok, that explained it – for some reason, her devices were hitting the query, and mine weren’t. I’m still not sure of the exact reason for that. In terms of fixing the problem, it doesn’t matter.
The solution was either to:
A: Remove the media query from site.css
B. Modify the media query to point to a valid image
I chose to remove the media query for now, because it seemed like a bug to me – mainly, the fact that the URL was pointing to a totally bogus location, and the average WordPress user would have no clue how to change this. Maybe this got added into the site.css by a stray plugin or update. I can always add it back in if I notice any adverse effects.
I wanted to write this post in case anyone else has trouble with their header images ‘disappearing’ while using the Genesis theme on WordPress.