4

My website is currently using a flex box layout and it is rendering correctly with Chrome, Firefox and Internet Explorer 10+.

I am using the Mobile friendly test to validate that my website is mobile friendly.

It is mobile friendly, yay! but there is an issue in their screenshot.

My flex box container has the flex-direction to produce its child items in columns, this works in all major web browsers but googles mobile friendly test is displaying my items in a row structure?

Does this test have full flex box support? Am I doing something wrong that does not target the engine this test uses. I can achieve the correct results by not using flex box but I would like to correct this issue with flex box.

Since I am a perfectionist I cannot allow this to happen even in a tool like the google mobile friendly test.

<div style="display:flex;flex:1 1 auto;flex-direction:row;height:50px;">
  <div style="display:inline-flex;flex:1 1 auto;height:100%;background-color:red;"></div>
  <div style="display:inline-flex;flex:1 1 auto;height:100%;background-color:green;"></div>
</div>

I created a fiddle with the feature that is broken.

https://jsfiddle.net/nativecode/kdaje19f/1/

https://www.google.com/webmasters/tools/mobile-friendly/?url=https%3A%2F%2Fjsfiddle.net%2Fnativecode%2Fkdaje19f%2F1%2F

Xela
  • 2,322
  • 1
  • 17
  • 32
  • Do you mean google's mobile friendly test is displaying the flex items in a *column* structure? Which is what is happening. You wrote *row* structure in your question, which is the display in your fiddle demo. – Michael Benjamin Apr 11 '16 at 23:02
  • @Michael_B No, to specify a column structure in flex box you must use flex-direction: row; and to specify row you must use column. Check my fiddle and then what googles mobile friendly test is doing and you will understand. – Xela Apr 11 '16 at 23:52
  • I think we may be fussing over semantics, but technically... `flex-direction: column` stacks flex items vertically (in a column format, hence the name). `flex-direction: row` stacks items horizontally (as a row, again, hence the name). – Michael Benjamin Apr 12 '16 at 00:04
  • In terms of the Google Mobile Friendly tester, it does indeed appear to lack full support for flex properties. We can simply your code to get the same result, and it doesn't work in the tester: https://jsfiddle.net/kdaje19f/5/ – Michael Benjamin Apr 12 '16 at 00:10
  • @Michael_B That's what I thought, the google mobile tester lacks full support for flex box properties. Do you think its best to leave it? or revert back to the traditional style for that particular web element? It just bugs me that it looks like that using that tool. – Xela Apr 12 '16 at 01:30
  • 1
    I think what matters is how your code renders in actual browsers. None of your site visitors will be using the tool, so who cares. Check my answer here for flex browser compatibility and known issues: http://stackoverflow.com/a/35137869/3597276 – Michael Benjamin Apr 12 '16 at 01:33
  • I guess google mobile tester is more a tool to see how the google robot sees it which could have an influence on your ranking in mobile search results. It has some important criteria but will not show you how the actual mobile browser will render it. – michaPau Apr 12 '16 at 10:47

0 Answers0