Barre de boutons responsive

Bonjour a tous !
Voilà j'ai un petit souci. On m'a donné un code, et je dois faire quelques modif' dessus.
En gros, j'ai une barre d'outil, remplie de boutons (cette barre est en dessous d'un livre virtuel, et les boutons permettent de tourner des pages, zoomer, imprimer, etc.). Du coup, on peut choisir quels boutons afficher ou non.
Le problème, c'est que lorsqu'on diminue la page, les boutons vont les uns en dessous des autres. Or, ma "mission", c'est que la barre diminue de taille (et donc les boutons avec), et que tout reste sur la même ligne.

Voilà des extraits de code :
HTML :

<div id="divControls[ID]" class="controls[ID]">
			<input type="button" class="pdf_attach" onclick="javascript:window.open('[PDFDOWNLOADLINK]')"/>
			<input type="button" id="btnPrintLeft[ID]" class="btnPrint" onclick="printLeftPage()" />
			<input type="button" id="btnZoomLeft[ID]" class="btnZoom" onclick="zoomLeftPage()" />
			<input type="button" id="btnPrev[ID]" class="btnPrev" onclick="GoToPrevPage()" />
			<label id="lbCurPage[ID]"></label>
			<input type="button" id="btnNext[ID]" class="btnNext" onclick="GoToNextPage()" />
			<input type="button" id="btnZoomRight[ID]" class="btnZoom" onclick="zoomRightPage()" />
			<input type="button" id="btnPrintRight[ID]" class="btnPrint" onclick="printRightPage()" />
			<input type="button" id="btnThumbnail[ID]" class="btnThumbnail" onclick="showHideThumbnails([ID])" />
		</div>

Vu que tout est modifiable, tout les [UNTRUC] se modifient.

.controls[ID] {
	display: [DISPLAYTOOLBAR];
    width : [WIDTH]px;
    text-align: center;
}

.controls[ID] input[type="button"]{	
    border-style: none;
	width: 32px;
	height: 32px;
	cursor: pointer;
}

.controls[ID] .btnPrev {
	visibility: [DISPLAYFLIPBUTTON];	
	background: url([IMAGESFOLDERPATH]/prev.png);	
}

.controls[ID] .btnNext {
	visibility: [DISPLAYFLIPBUTTON];
	background: url([IMAGESFOLDERPATH]/next.png);
}

(etc. pour chaque bouton...)
Du coup tout est dans le même fichier... Ne me blâmez pas, je reprends juste le code, moi
Bref disons que je ferais bien des modifs' du style :

 @media screen and (max-width: 400px) {
 .controls[ID] input[type="button"]{	
    border-style: none;
	width: 35px;
	height: 35px;
	cursor: pointer;
  }

Mais il prends pas trop ça en compte... Du coup je suis un peu perdue, et tout conseil est le bienvenue ! Merci
Modifié par Clera (19 Feb 2015 - 15:44)

Comment ça il ne prend pas trop ça en compte ? Est-ce qu'il prend ça en compte quand la largeur de ton navigateur est inférieure à 400 px ?
Modifié par Freez (19 Feb 2015 - 16:56)