28132 sujets

CSS et mise en forme, CSS3

Bonjour à tous

Cela fait des heures que j'essaie de régler les media-queries d'un fichier CSS et que je tourne en rond.

La page https://www.alma-musica.net/html/partitions/index.php

Le problème :
En mode "large écran" (PC), la présentation me satisfait
En mode "téléphone portrait" c'est également OK
Ce qui ne marche pas, c'est le mode "téléphone paysage" ou tablette, où l'écran est moins large qu'un PC et plus large qu'un téléphone en mode portrait.
Lorsque l'écran est moins large que 850px, je supprime la colonne de droite dont l'intérêt est secondaire. Cela permet de réduire la largeur et c'est comme ça que ça marche sur écran étroit.
Par contre sur un écran de taille intermédiaire la colonne disparaît mais je ne parviens pas à centrer le contenu de la page horizontalement.

Je suppose que ça dit sauter aux yeux d'une autre personne, mais je suis tellement englué dedans que je n'y comprends plus rien. Il est vrai que c'est une structure un peu complexe, avec pas mal de niveaux d'enchâssement, mais ça ne devrait pas empêcher de traiter le problème.

Quelqu'un pourrait il avoir la bonté de me venir en aide ?
Bonjour,

on voit que tes lecteurs audio débordent l'écran en mobile, en mode portrait. Ils ont donc une place allouée, place qui pourrait empêcher le centrage du reste. C'est une hypothèse, je n'ai pas testé. Tu as aussi plus loin du texte "version SSA, version SSA (chiffrée)" qui déborde aussi l'écran. Peut-être une piste ici aussi.
Sinon, l'une des possibilités est d'ajouter ça :
@media (max-width:768px) and (orientation: landscape) {
 main {
    flex-direction:row;
      }
}

Il faut quelque part dans le css un @media pour l'orientation landscape, à toi d'y mettre ce qui pose problème.
Aussi, mais ça n'a rien à voir avec ton problème, je crois que tes icônes pour les partitions et le son sont à la fois trop petites et trop rapprochées. Pour plus large que ça, Google Search Console m'a tapé sur les doigts.
Merci de bien vouloir de venir en aide.

Je n'avais pas pensé à mettre un @media landscape, je vais regarder de ce côté.

Effectivement les lecteurs audio débordent, je ne m'en étais pas rendu compte.
En fait il n'y a qu'un seul lecteur audio qui se déplace en fonction de l'endroit où on l'appelle.
Je vais régler ça.

Il s'agit d'un site qui n'est en pratique accédé que par les membres de l'association. Aucun ne m'a signalé de problème de proximité. Je ne m'intéresse pas à l'avis de Google tant que ça ne correspond pas au ressenti de mes utilisateurs, c'est un luxe qu'on peut s'autoriser quand on ne cherche pas à conquérir de nouveaux utilisateurs Smiley cligne
Pour situer un débordement, rien de tel :
html {
padding-right:3em;
background:transparent;}
body {
background:white}
* {box-shadow:inset 0 0 0 3px!important;
visibility:visible!important;
opacity:1!important;}

À mettre dans le css, provisoirement. Ça m'a été donné par un modérateur d'ici, mais il m'excusera d'avoir oublié son nom Smiley decu
Merci
Le débordement est réglé, il a suffi de changer le CSS du lecteur audio: au lieu d'être centré sur le bouton, il est calé à droite sur le bouton, ce n'est plus un problème.

Par contre mon histoire de media-query ne marche toujours pas.
Le problème ne se produit pas seulement sur les téléphones en mode paysage, mais également que les tablettes en mode portrait.
Ce n'est donc pas lié à l'orientation, c'est lié à la largeur de l'écran.
Administrateur
Bonjour,

Jusqu'à 850px, la page fait "au moins 100% de large", enfin plus exactement main :

/* ligne 383 */
/* présentation pour écran étroit */
@media screen and (max-width:850px) {
     div.performers {
        display: none;
    }
    main {
        min-width:100%;
    }
}

Dans les lignes suivantes, le contenu fait 100vw de large jusqu'à 750px de large.
Et en dehors de ces cas, ligne 3 c'est 60% de large.

Supprimer ce min-width devrait suffire je crois ?
Pour bien voir les limites du contenu - avec tout ce blanc pas évident - j'ajoute
section.authorset {
  outline: 1px solid red;
  outline-offset: -1px;
}
Merci du conseil, mais ça ne suffit pas à résoudre le problème
La version de test courante est à l'adresse https://www.alma-musica.net/html/partitions/@index.php
Pour simplifier, j'ai supprimé la taille intermédiaire de 750px, au moins provisoirement.
Restent deux problèmes que je n'arrive pas à résoudre :
sur iPhone en mode paysage
upload/1694333526-48769-landscape.png
comment centrer l'image, le but de

@media screen and (max-width:850px) {
     div.performers {
        display: none;
    }
    ....
}

étant de récupérer de la place

en mode portrait
upload/1694333661-48769-portrait.png
comment faire que les titres longs ne sortent pas de l'écran

Il s'agit de flex en cascade, je ne m'y retrouve toujours pas...
Après pas mal d'essais et erreurs, je suis parvenu à faire un réglage qui -- du moins pour l'instant -- me semble satisfaisant.

Merci à tous pour vos réponses qui m'ont aidé dans cette tâche difficile.