28113 sujets

CSS et mise en forme, CSS3

Mettre un menu sur une ligne uniquement sur le mobile

Modérateur
Bonjour,

Tu peux éventuellement faire une media-query. Ça ne ciblera pas forcément les mobiles mais en dessous d'une certaine largeur d'écran, tu pourras définir du css différent de celui pour écran large (ou plus exactement viewport large : sur un mobile c'est en général l'écran entier, mais sur un ordi de bureau, c'est la largeur de la fenêtre du navigateur).

Je n'ai d'ailleurs jamais trop compris pourquoi on faisait une différence entre mobile et ordinateur de bureau, soit dit en passant. Ce qui compte, ce sont les caractéristiques du viewport et plus rarement quelques autres caractéristiques de la machine, pas le fait qu'elle soit du genre "mobile" ou pas (ce qui est assez difficile à définir de toute façon).

Amicalement,
Modérateur
Bonjour,

Ça dépend du menu : toujours affiché ? se repliant/de dépliant ? avec ou sans js ? avec ou sans sous-menu ? etc.

C'est tellement varié qu'on ne peut pas donner comme ça un tuto plutôt qu'un autre.

Amicalement,
Bonjour
Dans mon cas, c'est
* toujours affiché
* sans js
* sans sous-menu
* sans repliant/dépliant (hamburger)

C'est la 1ère ligne en haut avec les 3 liens: connexion, s'inscrire ... sur le smartphone
https://clibre.eu/

@+
Modifié par HDcms (20 Oct 2022 - 10:40)
Bonjour
Bon je l'ai remis au format par défaut (provisoirement car cela prend trop d'espace)
Ceci est tjs un problème.
Bonjour
Toujours à la recherche d'une solution. Ce n'est pas facile car je ne vois pas au niveau du smartphone; J'ai fais de nombreux essais
Voici mon dernier essai (ok je me doute que ce n'est pas terrible) :

@media only screen and (orientation: portrait) and (max-width: 500px) body > header > div.grid-child.container-below-top > ul > li > a {
/*border:10px dotted black;
display: inline;*/
display: flex;
}
Modérateur
Bonsoir,

C'est plutôt sur ul qu'il faut appliquer le formatage en grille, pas les liens Smiley cligne

Cdt
Bonjour
Ok merci.
Maj sans @media cela fonctionne mais plus du tout si j'ajoutte la condition pour les petits écrans Smiley decu
Est-ce que cela est la meilleure solution? sans effet de bord (je ne vois pas exactement la même chose quand je rétrécis la taille de l'onglet du navigateur sur le PC ?

@media only screen and (orientation: portrait) and (max-width: 500px) body > header > div.grid-child.container-below-top > ul {
	display: contents;
}
@media only screen and (orientation: portrait) and (max-width: 500px) body > header > div.grid-child.container-below-top > ul > li  > a {
	margin: 5px;
}

Modifié par HDcms (27 Oct 2022 - 10:24)
Bonjour
Il semble qu'il manquait une parenthèse, nénamoins cela ne résout pas le problème.
Une idée ?
@media only screen and (orientation: portrait) and (max-width: 500px) { body > header > div.grid-child.container-below-top > ul {
	display: contents;
}
}
@media only screen and (orientation: portrait) and (max-width: 500px) {body > header > div.grid-child.container-below-top > ul > li  > a {
	margin: 5px;
}
}
Prévenir un modérateur
Répondre au sujet
Aller à