I have created a social media menu with several different links. It displays correctly in Chrome, Safari, Firefox, and Internet Explorer on iOS devices, but on Android devices, the icons stack horizontally:
Here is the HTML code:
<ul id="menu-social">
<li>link to site</li>
<li>link to site</li>
<li>link to site</li>
<li>link to site</li>
<li>link to site</li>
</ul>
And here is the CSS code:
ul#menu-social {
margin: 0 auto;
text-align: center;
height:40px;
}
ul#menu-social li {
float:left;
display: table;
padding: 0;
text-align: center;
width: 20%;
margin: 0 auto;
background: none;
}