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

Question

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 -

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

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

@SanjayPrajapati To what, the site? It's still on localhost. — Mike.Whitehead, Oct 18 '17 at 11:11
@msbodetti I've added a codepen link to the answer. It might be the masonry column rule but why would it only do it on chrome and not safari and firefox? — Mike.Whitehead, Oct 18 '17 at 11:33
It is odd @Mike.Whitehead but change .brick `display:inline-block` to `display:flex` — designtocode, Oct 18 '17 at 11:37
Hmm odd. It should have changed, see this forked pen https://codepen.io/msbodetti/pen/JrwmXQ — designtocode, Oct 18 '17 at 11:50
@msbodetti The only conclusion, then is that it is a compatibility issue specific to wordpress. How do I get all my child - theme styles to apply? Is there a plugin or something for compatibility? — Mike.Whitehead, Oct 18 '17 at 11:54
See here > https://digwp.com/2016/01/include-styles-child-theme/ — designtocode, Oct 18 '17 at 11:59

score 2 · Answer 1 · answered Oct 18 '17 at 18:39

2

With some help from the responses to this, I figured it out -

.staff .brick {
       display: flex;

}

answered Oct 18 '17 at 18:39

Mike.Whitehead

798
18
52

Colin Gell · Accepted Answer · 2017-10-18T18:47:27.530

1

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;
    }
}

edited Oct 18 '17 at 18:47

answered Oct 18 '17 at 17:27

Colin Gell

372
1
13

Thanks. That works for Chrome and Safari but breaks on Firefox. – Mike.Whitehead Oct 18 '17 at 18:11
Okay I've ammended the answer to include float: none; targeted only at firefox browsers – Colin Gell Oct 18 '17 at 18:48
Thanks Colin, I've marked your answer correct. Do I always use that prefix then to target firefox with a bespoke CSS rule? How do I target Chrome and/or Safari ? It might help me with this - https://stackoverflow.com/q/46814877/3521315 – Mike.Whitehead Oct 18 '17 at 18:57
Thanks @Mike.Whitehead You shouldn't always need to use that prefix only when you have conflict issues. – Colin Gell Oct 18 '17 at 19:03
for Chrome and Safari I believe this would work @media screen and (-webkit-min-device-pixel-ratio:0) { .brick { float: left; } } – Colin Gell Oct 18 '17 at 19:04
Note these are css hacks just for conflict issues, and not for general coding – Colin Gell Oct 18 '17 at 19:05
Many thanks. I've just got a few issues with some text - it looks as though I need some more font files but not sure if the client has them so this 'might' give me a work around:) – Mike.Whitehead Oct 18 '17 at 19:09

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

2 Answers2