How can i get this icon menu to look good on devices as it does on desktop

Question

I have this menu of icons looking pretty good on desktop view, see it here.

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

But once you move to mobile device ipad 1024px and below, the menu gets crowded and drops to 2 lines, and I would like to keep on same line, but maybe bring in each icon closer on devices to avoid this.

So I thought the call out would be the same for media queries, but I cant get it to work.

Code inline html for this area

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

And my media code

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

So I changed the PX to 95 to bring them in closer on media devices...but it isn't taking affect. I see that it likes the call out #nav ul better but that to me isn't the same area and once I try this #nav ul in the place of the #nav li, it moves but still not quiet right.

Please if this isn't the correct media call out for responsiveness, feel free to change this 100%.

Stumped...please help Thx

Answer 1

try

#nav li {
    width: 135px;
}

to

#nav li {
    width: 10%;
}