Search code examples
csswordpressgoogle-chromecompatibility

Wordpress - Chrome / Safari issues with font size and image layout

I'm having some cross browser styling issues with a site I've just loaded up onto a wordpress html5blank child theme.

For example, here's an image layout as it is showing in Chrome -

staff img - block stack

And this is in Firefox & Safari (how it should look) -

staff img - inline-block

The style code is set correctly as display: inline-block; but Chrome isn't having it.

I also have issues in Safari and Chrome regarding font-weight (showing much lighter than is set) and font-size (smaller than it should be). Is there some method and/or plugin that stops all the compatibility issues?

UPDATE -

I've placed the code on a codepen here

Solution

  • You just need to add

    .brick { float: left;}

    I tested it in your code pen, and when I inspected the element float: left; was greyed out for some reason. Then I just added the above to your code, and it worked.

    Add this to target firefox 

    @-moz-document url-prefix() {
    .brick {
        float: none;
    }
}