affichage différent sur smartphone d'un menu sont alignement sur 1 ligne

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [Problème] affichage différent sur smartphone d'un menu sont alignement sur 1 ligne

    Bonjour
    Je galère depuis pas mal de temps pour avoir un affichage différent de ce qui est possible par défaut pur joomla 4, sur un menu sur un petit écran.
    J'ai d'autant plus de difficulté que j’utilise le mode inspecter sur le navigateur de l'ordi de bureau pas .. le smartphone, ce qui n'est pas simple.

    1/ alignement sur 1 ligne
    sans @media cela fonctionne mais plus du tout si j’ajoute la condition pour les petits écrans
    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 ?
    Code:
    @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;
    }
    2/ passage mode hamburger sans ce mode s'il ne reste plus qu'un élément.
    Imaginez un menu "hamburger" s'il y a x lignes mais qui reste dans ce mode même s'il n'y a plus qu'un élément (par exemple après connexion)
    Est-ce qu'il y aurait une solution simple pour gérer cette situation?
    Faciliter l'adoption du meilleur du Libre auprès du grand public https://clibre.eu/ - Connaissez-vous des communicants ... pour promouvoir joomla ? https://forum.joomla.fr/forum/th%C3%A8mes-communautaires/tout-et-rien/2027647-connaissez-vous-des-graphistes-communicants-pour-promouvoir-joomla

  • #2
    Envoyé par herve Voir le message
    Bonjour
    J'ai d'autant plus de difficulté que j’utilise le mode inspecter sur le navigateur de l'ordi de bureau pas .. le smartphone, ce qui n'est pas simple.
    Ben, ma foi, pour simuler un smartphone ave un ordinateur de bureau, suffit de redimensionner la page à une largeur d'environ 600 pixels...
    Sinon, il y a de sites qui font très bien l'affaire...

    Je rajoute qu'il y a une erreur de syntaxe.
    Il faut écrire:

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

    Double accolades.
    herve aime ceci.

    Commentaire

    Annonce

    Réduire
    Aucune annonce pour le moment.

    Partenaire de l'association

    Réduire

    Hébergeur Web PlanetHoster
    Travaille ...
    X