[BootStrap 4] Mauvais affichage sur mobile

Version imprimable

2 pièce(s) jointe(s)

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:

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 :
Pièce jointe 595135

voici l'affichage sur mobile:
Pièce jointe 595136

d'avance merci !

08/04/2021, 10h15
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.
11/04/2021, 00h22
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
11/04/2021, 10h47
ProgElecT

Salut

Citation:

Envoyé par netlink1987

... 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.
13/04/2021, 02h19
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 ?
14/04/2021, 10h57
NoSmoking

Bonjour,

Citation:

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 ;)
14/04/2021, 22h09
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.

Citation:

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 :mrgreen:

Essaie avec au départ simplement :

Code:

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>

17/04/2021, 15h04
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 !