Wygląd menu w PW - tryb responsywny.

Powiedzcie jak to ogarnąć. Teraz mam:

   

Chcę uzyskać to:

   

czyli jedno obok drugiego.

W stylach mam:

.usercp_nav_item, .modcp_nav_item {
display: inline-block;
padding: 10px 12px;
border-radius: 3px;
width: 145px;
text-align: center;
background: #F9F5EE;
margin: 0 0 4px 0;
}

.usercp_nav_pminbox:before {
    content:"\f0e0";
}

@media only screen and (min-width:0px) and (max-width:479px){
.wrapper{width:95%;}

.usercp_nav_item, .modcp_nav_item {
    display: block;
    width: auto;
    text-align: left;
}
    
} 


Forum: https://www.akwarystyka-miedziowa.pl
Login: tester
Pass: Abc_123

18 linia w ACP.
Usuń wyświetlanie blokowe (możesz nadać inline-block zamiast obecnego), zmniejsz czcionkę i nadaj margin-right:. Poza tym w linii 8 możesz zmienić width na 100%. Jeśli chcesz to tylko na urządzeniach o małej rozdzielczości, to nic nie zmieniasz. Wtedy tylko kopiujesz całe selektory i nadpisujesz wartości w media. Przykład:

@media (max-width:479px) {
  .usercp_nav_item, .modcp_nav_item { width: 100%; }
  .usercp_nav_item:before, .modcp_nav_item:before { display: inline-block; margin: 0; margin-right: 3px; font-size: 13px; }
}