Discussion :

[netlink1987]

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 :


voici l'affichage sur mobile:


d'avance merci !

[mathieu]

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.

[netlink1987]

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

[ProgElecT]

Salut

... 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.

[netlink1987]

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 ?

[NoSmoking]

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

[netlink1987]

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.

[NoSmoking]

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>

[netlink1987]

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 !