Adaptation css menu sur différentes résolutions

[sevsev]

Bonsoir,

sur certaines tailles d'écran, les catégories de mon menu horizontal s'affichent sur 2 lignes.

Afin d'y remédié il m'a été conseillé de réduire la taille de la police du menu pour les résolutions concernées ? 

Voici le code de base de mon menu :

.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color: #fff!important;
    text-transform: uppercase;
    font: 500 1rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}

j'ai donc mis ce code 

@media (min-width: 992px){
.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 0.8rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}}



@media (min-width: 576px){
.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 0.8rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}}

mais quel que soit la résolution, la taille qui s'affiche est 0.8 ^^

 

Un petit coup de main serait le bienvenu ?  merci

[Eolia]

Ben c'est logique^^

Des max-width seraient préférables...

[sevsev]

lol ok ^^ merci bien

Bon j'ai rectifié
 

@media (max-width: 1200px){
.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 1.02rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}}

@media (max-width: 992px){
.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 0.9rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}}

@media (max-width:576px){
.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 0.8rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}}

J'ai ma résolution entre 992px et 1200px qui reste sur 2 lignes. Il y a autre chose qui divague dans mon code 

Edited October 28, 2020 by sevsev (see edit history)

[Eolia]

Ben non, toujours logique^^

Commencez par faire votre règle générale (Au-dessus de 1200, donc pa besoin de préciser le @media)

et dans la règle du max-width 1200 mettez 1rem en remplaçant le 1200 par la résolution qui provoque le changement (dans le 1100 je pense)

[sevsev]

Encore merci pour votre aide et votre temps

Je ne comprends pas car c'est entre 992px et 1200px que ca merdouille ^^

Entre ces 2 résolutions ma font: 1.02rem....

 

.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 1.02rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}

@media (max-width: 1100px){
.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 1rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}}

@media (max-width: 992px){
.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 0.9rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}}

@media (max-width:576px){
.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 0.8rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}}

 

Edited October 28, 2020 by sevsev (see edit history)

[sevsev]

J'ai essayé de mettre ceci, mais ça ne fonctionne pas :

.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 1.02rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}

@media (min-width: 992px) and (max-width: 1200px) {
.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 0.8rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}}

Dans ma console (F12) la règle générale est appliquée pour la résolution entre 992 et 1200px ! 

J'ai vidé mon cache...

[Eolia]

@media screen and (min-width: 992px) and (max-width: 1100px) {

[sevsev]

Super merci ^^

Je rencontre le même soucis de résolution sur 2 autres éléments de ma boutique. Je vais creuser

Merci beaucoup