[Resolved] Header images broken on Firefox & Safari

[Craig]

I’m having a problem with a new site that I’ve built with Generate Press. On one of the pages I have a header image spanning the full width of the content. The image displays fine when I resize the browser with chrome or IE, however in Firefox it disappears when the browser gets to a certain width and just shows the image name. There’s also some funkiness going on with the standard icons (dropdown arrow etc) in the main menu.

Any ideas what’s causing this or how to fix it?

[Tom]

I can’t see the first image.

For the second issue, this should help: http://stackoverflow.com/questions/26125030/font-awesome-icons-not-showing-in-chrome-a-maxcdn-related-cross-origin-resource

[Craig]

Thanks Tom, I’ll see if I can fix the font awesome problem with that solution.

With regards to the header problem, you can see it happening here with Firefox if you resize the screen or Safari on iPhone – http://www.shakedigital.com/seo-edinburgh/

[Tom]

That’s super strange, it could be an issue with your server and WordPress trying to integrate responsive images.

See if this plugin fixes it: https://en-ca.wordpress.org/plugins/disable-responsive-images/

[Craig]

Thanks for the help Tom, that sort of worked. The header image now works with Firefox but still doesn’t show on an iPhone…

[Tom]

Somethings not right, can you try #1 on this page?: https://generatepress.com/knowledgebase/debugging/

You might have a plugin installed that’s breaking core WP functionality.

[Craig]

So strange, I disabled all plugins then activated them all one by one, it’s now working! No idea how or why but as long as it’s working I’m happy.

Thanks for your patience, Tom!

[Tom]

Awesome, glad you got it working 🙂

[Author]

Posts