Comment puis-je obtenir ce menu icône pour bien sur les appareils comme sur le bureau

Question

J'ai ce menu d'icônes qui semble très bien sur le bureau, voir ici.

http://www81.myfantasyleague.com/2016/home/53558#0

Mais une fois que vous vous déplacez vers l'appareil mobile iPad 1024px et ci-dessous, le menu est bondée et tombe à 2 lignes, et je voudrais continuer sur la même ligne, mais peut-être apporter chaque icône plus sur les appareils pour éviter cela.

Donc, je pensais que l'appel serait le même pour les requêtes de médias, mais je ne peux pas le faire fonctionner.

code html en ligne pour cette zone

#nav li { 
    vertical-align:top; 
    display:inline-block; 
    margin:0 auto; 
    text-align:center; 
    width:135px;   /*** ADJUST THIS WIDTH SO IMAGES FILL TEMPLATE WIDTH ****/ 

Et mon code média

@media only screen and (max-width: 1024px) { 
#nav li { 
    vertical-align:top; 
    display:inline-block; 
    margin:0 auto; 
    text-align:center; 
    width:95px;}} 

Je changé le PX à 95 pour les mettre en plus sur les appareils des médias ... mais il n » t prenant effet. Je vois qu'il aime bien l'appel #nav ul mieux mais pour moi ce n'est pas la même zone et une fois que j'essaye ce #nav ul à la place du #nav li, ça bouge mais toujours pas tranquille à droite.

S'il vous plaît, si ce n'est pas le bon support pour la réactivité, n'hésitez pas à changer ce 100%.

... Stumped s'il vous plaît aider Thx

Answer 1

essayer

#nav li { 
    width: 135px; 
} 

à

#nav li { 
    width: 10%; 
}