Ajouter Scrollbar horizontale

  • WordPress :5.2
  • Statut : non résolu
10 sujets de 1 à 10 (sur un total de 10)
  • Auteur
    Messages
  • #2298205
    Ananas0103
    Participant
    Initié WordPress
    7 contributions

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 7.3.13
    • Thème utilisé : Spacious
    • Extensions en place : Cookie Notice (1.2.50) Elementor (2.8.5) Everest Forms (1.6.1) Max Mega Menu ( 2.7.4) Yoast SEO (13.0)
    • Nom de l’hébergeur : Ikoula
    • Adresse du site : http://www.5-minuten-jus.ch

    Problème(s) rencontré(s) :

    Bonjour,
    Sur mon site, je crée beaucoup de listes à plusieurs niveaux. Le problème, c’est que sur version mobile, l’écran est trop petit horizontalement pour afficher tous les niveaux. Cela m’arrive en particulier sur cet article: https://5-minuten-jus.ch/schweizer-recht-schemata-uni-basel-notwehr-pruefungsschema/

    Ne pouvant pas réduire ma liste, je pensais mettre une scrollbar horizontale pour que le contenu soit quand-même visible. N’ayant pas de connaissances en informatique, j’ai cherché sur divers forums, mais je n’ai pas trouvé de réponse compréhensible.

    Si quelqu’un pouvait m’aider…
    Merci d’avance pour toutes vos réponses!

    #2298206
    PhiLyon
    Modérateur
    Maître WordPress
    24571 contributions

    Bonjour.

    Regarde avec l’overflow, visible ou hidden, je ne sais plus lequel, je ne suis pas sur mon PC.

    🙂

    #2298208
    PhiLyon
    Modérateur
    Maître WordPress
    24571 contributions

    Zut, c’est horizontalement, je n’avais pas vu. Si personne ne donne la solution je regarde ce soir.

    🙂

    #2298248
    ferman
    Participant
    Maître WordPress
    1859 contributions

    Bonjour,

    Essayez le code ci-dessous à mettre dans les css additionnelles du thème. Pas sûr que ce soit l’idéal mais c’est au moins un début (que PhiLyon corrigera peut-être). La barre horizontale est juste sous: “handeln mit abwehrwille”. (et non Angriffwille: les Bâlois sont prudents!).

    @media screen and (max-width: 600px){
      ol:nth-child(3){  
    	width:30em;
      overflow-x: scroll;
      white-space: nowrap;
    }
    }

    • Cette réponse a été modifiée le il y a 3 jours et 18 heures par ferman.
    #2298277
    PhiLyon
    Modérateur
    Maître WordPress
    24571 contributions

    Bah, où tu as vu que la molette de la souris faisait un scroll horizontal ? 😆

    Essaie plutôt avec

    overflow-x: auto;

    🙂

    #2298284
    ferman
    Participant
    Maître WordPress
    1859 contributions

    @PhiLyon,

    Bonsoir,

    Bah, où tu as vu que la molette de la souris faisait un scroll horizontal ?

    J’avais essayé les deux (scroll ou auto) sans voir de différence: dans les deux cas sans la molette de la souris mais en plaçant le pointeur sur la barre  de défilement. Quand on regarde ici, on ne voit pas non plus de différence mais je n’ai pas essayé avec un vrai mobile; seulement avec la simulation Firefox. Si vous pensez que “auto” est mieux, d’accord.

    • Cette réponse a été modifiée le il y a 3 jours et 13 heures par ferman.
    #2298322
    PhiLyon
    Modérateur
    Maître WordPress
    24571 contributions

    Bonjour.

    C’était juste une question de logique, mais attendons que @Ananas0103 fasse l’essai, je viens de regarder sur mobile et ce n’est pas top sa liste.

    Je ne pige pas pourquoi en glissant sur l’écran ça ne fonctionne pas, question de thème, de paramétrage ?

    🙂

    #2298335
    Ananas0103
    Participant
    Initié WordPress
    7 contributions

    Bonjour, j’ai ajouté le code de ferman et j’ai remplacé “scroll” par “auto”, ça fonctionne bien, merci!

    PhilLyon: Niveau paramétrages, j’ai pas trop touché, je pense que ça vient du code. Dans le fichier style.css, j’ai seulement trouvé une commande Overflow-y, donc je pense que mon thème n’est tout simplement pas prévu pour le scroll horizontal.

    En tout cas, merci beaucoup pour votre aide! 🙂

    #2298336
    ferman
    Participant
    Maître WordPress
    1859 contributions

    Bonjour,

    Je viens de regarder. Il y a une petite correction à faire: remplacer “ol:nth-child(3)” par “li ol:nth-child(3)” autrement il y a une petite scrollbar supplémentaire au niveau de 3.schutzwehr: defensiv

    #2298407
    Ananas0103
    Participant
    Initié WordPress
    7 contributions

    Le fait de rajouter li, ça me bloque de nouveau tout le scroll horizontal, je ne sais pas pourquoi. Mais j’ai réussi à enlever la petite scrollbar en retirant simplement le texte qui ne faisait pas partie d’une liste juste avant le petit bout en question. Je ne sais pas pourquoi ça a changé quelque chose, ceci dit…

    Mais tant que tout mon schéma est lisible, ça me va, merci pour ta solution, en tout cas!

10 sujets de 1 à 10 (sur un total de 10)
  • Vous devez être connecté pour répondre à ce sujet.