Responsive qui ne marche pas sur gsm

Résolu/Fermé
Marlocq Messages postés 117 Date d'inscription mardi 19 novembre 2013 Statut Membre Dernière intervention 10 septembre 2023 - 11 oct. 2018 à 10:24
Marlocq Messages postés 117 Date d'inscription mardi 19 novembre 2013 Statut Membre Dernière intervention 10 septembre 2023 - 11 oct. 2018 à 11:20
Bonjour,

j ai mon code css qui ne passe pas sur les gsm alors que sur firefox developper ça marche et que j'ai déjà fait se genre de code pour d'autre site pour lesquels ça marchait aussi...

voici l'appel du css et juste pour le menu

/** menusup **/

#menusup {
margin-top: 50px;
padding: 7px 0px;
width: 100%;
background-color:#ffffff;
}

#menusup ul li {
display: inline;
margin-left: 5px;
}

#menusup ul li a {
color: #969696;
padding: 5px 10px;
font-size:1em;
}

#menusup ul li a:hover {
color: #ac5120;
transition: all 0.2s ease-in 0s;
}

#menusup ul li.active a {
background: #0c7172; /* Old browsers */
background: -moz-linear-gradient(top, #1e9a9b 0%, #0c7172 50%, #0c7172 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e9a9b), color-stop(50%,#0c7172), color-stop(100%,#0c7172)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e9a9b 0%,#0c7172 50%,#0c7172 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e9a9b 0%,#0c7172 50%,#0c7172 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e9a9b 0%,#0c7172 50%,#0c7172 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e9a9b 0%,#0c7172 50%,#0c7172 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e9a9b', endColorstr='#0c7172',GradientType=0 ); /* IE6-9 */
padding: 5px 10px;
color: #fff;
border-top : 1px solid #1e9a9b;
font-weight: bold;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
transition: all 0.2s ease-in 0s;
}

#menusup ul li.active a:hover {
color: #ac5120;
font-weight: bold;
}

/** menusecondaire **/

#menusecondaire {
padding: 7px 0px;
width: 100%;
background-color:#0c7172;
margin-top: -2px;
}

#menusecondaire ul {
margin-left: 50px;
}

#menusecondaire ul li {
display: inline;
margin-left: 5px;
}

#menusecondaire ul li a {
color: #969696;
padding: 5px 10px;
font-size:0.9em;
transition: all 0.2s ease-in 0s;
}

#menusecondaire ul li a:hover {
color: #ac5120;
transition: all 0.2s ease-in 0s;
}

#menusecondaire ul li.subactive a {
color: #fff;
font-weight:bold;
transition: all 0.2s ease-in 0s;
}

#menusecondaire ul li.subactive a:hover {
color: #ac5120;
font-weight:bold;
transition: all 0.2s ease-in 0s;
}

@media only screen and (min-width:250px) and (max-width: 750px) {
/** menusup **/
nav {
background-color:#0c7172;
width:100%;
padding-bottom:0.3em;
}
#menusup {
margin-top: 0%;
padding: 1% 0%;
width:50%;
float: left;
background-color:#0c7172;
}
#menusup ul li {
display: block;
margin-left: 0%;
margin-top:0.4em;
}
#menusup ul li a {
color: #969696;
padding: 5px 10px;
font-size:1em;
}
#menusup ul li.active a {
background: #969696;
padding: 5px 10px;
color: #fff;
border-top : none ;
font-weight: bold;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}

/** menusecondaire **/
#menusecondaire {
margin-top: 0%;
padding: 1% 0%;
width:50%;
float: right;
background-color:#0c7172;
}
#menusecondaire ul {
margin-left: 0%;
}
#menusecondaire ul li {
display: block;
margin-left: 0%;
margin-top:0.3em;
}
#menusecondaire ul li a {
color: #969696;
padding: 5px 10px;
font-size:0.9em;
transition: all 0.2s ease-in 0s;
}
#menusecondaire ul li.subactive a {
color: #fff;
font-weight:bold;
transition: all 0.2s ease-in 0s;
}
}


Je n'ai pas encore fini de le mettre en place que rien ne passe sur les gsm....

1 réponse

Marlocq Messages postés 117 Date d'inscription mardi 19 novembre 2013 Statut Membre Dernière intervention 10 septembre 2023
11 oct. 2018 à 11:20
solution trouvé

j'avais oublié la meta.... (<meta name="viewport" content="width=device-width,initial-scale=1.0" />)
0