IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

[BootStrap 4] Mauvais affichage sur mobile


Sujet :

Framework CSS Bootstrap

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    mars 2020
    Messages
    59
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs

    Informations forums :
    Inscription : mars 2020
    Messages : 59
    Points : 32
    Points
    32
    Par défaut [BootStrap 4] Mauvais affichage sur mobile
    bonjour à tous,

    Alors voila l'affichage de ma page (site bootstrap 4) est correcte en version PC/tablette
    mais mais sur mobile. Bootstrap empile les colonnes sur mobile mais cela n'est pas visualisable.

    Auriez vous une idée pour conserver l'affichage en mode paysage sur mobile ou pour bloquer ce meme mode
    paysage ?

    Voici le code :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="container-fluid">
    <div class="col-lg-10 col-md-10 mx-auto">
    <div style="background-color: #7E0219; color: bisque;">
    <div id="displayscore1"></div>
    <HR>
    <div id="displayscore2"></div>
    <HR>
    </div>
    </div>
    </div>

    voici l'affichage sur pc :
    Nom : Capture_pc.PNG
Affichages : 73
Taille : 6,0 Ko

    voici l'affichage sur mobile:
    Nom : Capture_mobile.PNG
Affichages : 85
Taille : 6,9 Ko

    d'avance merci !

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 114
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 114
    Points : 12 632
    Points
    12 632
    Par défaut
    peut être que pour l'affichage sur un petit écran, ça serait plus lisible en affichant les résultats en colonne au lieu d'en ligne. et donc faire un 2e tableau pour cet affichage.

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    mars 2020
    Messages
    59
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs

    Informations forums :
    Inscription : mars 2020
    Messages : 59
    Points : 32
    Points
    32
    Par défaut
    Merci mathieu pour ta suggestion mais ca change trop de chose de passer dans un mode colonne.

    Je pense plutôt à forcer un passage en paysage pour les mobiles, pas très beau mais plus simple je pense.

    Eric

  4. #4
    Modérateur
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    décembre 2004
    Messages
    5 522
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : décembre 2004
    Messages : 5 522
    Points : 13 565
    Points
    13 565
    Par défaut
    Salut
    Citation Envoyé par netlink1987 Voir le message
    ... forcer un passage en paysage pour les mobiles...
    Cela peut rebuter certain qui visiteront ton site, en tout cas moi je n'aime pas que l'on m'impose ce genre de chose.
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Balises[C]...[/C] code intégré dans une phrase.
    Balises[C=NomDuLangage]...[/C] code intégré dans une phrase quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.
    👉 → → Ma page perso sur DVP ← ← 👈

  5. #5
    Nouveau membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    mars 2020
    Messages
    59
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs

    Informations forums :
    Inscription : mars 2020
    Messages : 59
    Points : 32
    Points
    32
    Par défaut
    Oui tu as raison c'est un peu brutal. Il y a peut-être une solution avec les média queries, quelqu'un connaît ?

  6. #6
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 284
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 284
    Points : 38 065
    Points
    38 065
    Par défaut
    Bonjour,
    Il y a peut-être une solution avec les média queries, quelqu'un connaît ?
    peut-être que si tu nous donnais le rendu souhaité, même approximatif, sur écran étroit on pourrait te guider

  7. #7
    Nouveau membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    mars 2020
    Messages
    59
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs

    Informations forums :
    Inscription : mars 2020
    Messages : 59
    Points : 32
    Points
    32
    Par défaut
    Bonjour à tous,

    Je souhaite que le "scoreboard" horizontal apparaissent de la même facon sur mobile qu'il apparait sur PC
    en mode portrait tout simplement. Sans passer par un empilage qui oblige à basculer manuellement
    le mobile en mode paysage.

    Je ne suis pas compétent dans ce domaine, je bricole comme je peux avec des connaissances limitées.

    Je m'étais dit naïvement qu'en diminuant la taille de la police , les marges etc ... ca fonctionnerait mais
    je n'y arrive pas.

    Voila , si vous avez une idée.

    Merci d'avance.

  8. #8
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 284
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 284
    Points : 38 065
    Points
    38 065
    Par défaut
    Je ne suis pas compétent dans ce domaine, je bricole comme je peux avec des connaissances limitées.
    Il y a un minimum à faire lorsque l'on utilise BootStrap, à savoir comprendre sa philosophie, vous avez 3 heures pour répondre

    Essaie avec au départ simplement :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <div class="container-fluid">
      <div class="row">
        <div class="col-5">FISH, CARLOS (USA)</div>
        <div class="col-1">S</div>
        <div class="col-1">1</div>
        <div class="col-1">2</div>
        <div class="col-1">3</div>
        <div class="col-1">4</div>
        <div class="col-1">5</div>
        <div class="col-1">AD</div>
      </div>
      <div class="row">
        <div class="col-5">BIRD, TOM (USA)</div>
        <div class="col-1"></div>
        <div class="col-1">1</div>
        <div class="col-1">2</div>
        <div class="col-1">3</div>
        <div class="col-1">4</div>
        <div class="col-1">5</div>
        <div class="col-1">AD</div>
      </div>
    </div>

  9. #9
    Nouveau membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    mars 2020
    Messages
    59
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs

    Informations forums :
    Inscription : mars 2020
    Messages : 59
    Points : 32
    Points
    32
    Par défaut
    bonjour,

    Je viens de tester avec ces paramètres moins restrictifs et c'est beaucoup mieux !

    Je bosse un peu sur le sujet et reviens vers vous.

    Merci NoSmoking !

Discussions similaires

  1. [Encodage] Caractères spéciaux et affichage sur mobile
    Par Patrice.H dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 01/03/2011, 16h26
  2. Réponses: 2
    Dernier message: 19/08/2009, 14h16
  3. Mauvais affichage sur un histogramme
    Par Mloody2000 dans le forum Langage
    Réponses: 5
    Dernier message: 27/08/2008, 19h07
  4. [Swing] mauvais affichage sur JPanel
    Par rems033 dans le forum AWT/Swing
    Réponses: 10
    Dernier message: 25/09/2007, 11h52
  5. Mauvais affichage sur X-axis
    Par Hanae dans le forum BIRT
    Réponses: 3
    Dernier message: 06/07/2007, 11h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo