Flexbox ignored on mobile

Question

I used flexbox to spread the list items in the footer navigation across the width of footer.

It is being displayed correctly in my browser and also in Chrome's mobile emulation. However it is ignored on any mobile device I've tested with (iPhone, iPad, Samsung tablet).

Does anyone see anything obvious wrong with the code I'm not aware of? Below is the CSS/LESS snippet I'm using.

ul {
   display: flex;
   justify-content: space-between;
   width: 100%;
   padding: 0;

   li {
      padding: 0;
   }
}

Answer 1

This is happening as display:flex & justify-content: space-between are not compatible in all type of browsers.So we should have a cross-browser compatible CSS like this:

ul {

  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: space-between; 
  justify-content: space-between; 

   width: 100%;
   padding: 0;

   li {
      padding: 0;
   }
}

Browser Support for display:flex

• IE 11
• Edge
• FireFox 22+
• Chrome 29+
• Safari 9+
• Opera 17+
• Android Browser 4.4+

Browser Support for justify-content: space-between

• IE 11
• Edge
• FireFox 20+
• Chrome 52+
• Safari 9+
• Opera 12.1+
• Android Browser 5.6+

Useful Links:

https://caniuse.com/#feat=flexbox

https://caniuse.com/#feat=mdn-css_properties_justify-content_flex_context

https://css-tricks.com/using-flexbox/