1448 sujets

Web Mobile et responsive web design

Salut à tous,
j'ai un problème pour faire la version mobile de mon site web. Pour ça j'utilise les medias queries (ou plutôt j'essaye) mais j'ai un petit problème. Je n'arrive pas à "la connecter".

Pour l'instant je veux juste changer la couleur d'un titre mais lorsque je suis en mode mobile sur internet ça ne fonctionne pas.


Help please !!
Modifié par alizee_gly (01 Oct 2019 - 11:56)
Modérateur
Salut,

Ma boule de cristal étant cassée tu peux nous montrer ton code qui ne marche pas ? Smiley lol
Le reste du CSS marche ?
Désolé je croyais que la photo était passée Smiley cligne

oui ça marche normalement c'est juste le css du mobile qui marche pas, je crois que j'ai pas bien noté le media

@media only screen and (max-device-width:480px) {
.presentation__title{
color: #FF625A;
}
}

.presentation__title{
font-weight: bold;
font-family: 'Montserrat';
color: #fff;
text-align: center;
margin: 0 auto;
width: 78%;
}
Modérateur
Bonjour,

Rien d'étonnant, vous définissez une règle contextualisée (480px de largeur max) puis une règle générale applicable en tout temps.

Faites donc l'inverse en appliquant un style général puis votre media-queries, vous constaterez le changement immédiat.


/* De manière générale, applique ces règles navigateur chéri */
.presentation__title{
font-weight: bold;
font-family: 'Montserrat';
color: #fff;
text-align: center;
margin: 0 auto;
width: 78%;
}

/* par contre tant que device-width est inférieur à 480px, fais ceci... */
@media only screen and (max-device-width:480px) {
.presentation__title{
color: #FF625A;
}
}


D'autre part pas sûr que max-device-width soit un choix pertinent. Perso je préfère bosser avec max-width, tout simplement.