Problème de Responsivité

Community Usage questions
1

Bonjour,
En voulant passer l’interface(tablette) à une interface(mobile) je rencontre un soucis au niveau des strip.

image
image.png438×541 15.1 KB

Pour le premier strip aucun soucis mais le 2 ème refuse catégoriquement de bouger.
le CSS utilisé pour le premier est :

width:450px;
@media screen and (max-width:900px) {
:host {
width: calc(100% - 100rem);
}
margin-top : -40px;
margin-left : -60px
}

et pour le deuxième le seul changement c’est la valeur des margin.

Cordialement

2

Salut,
Ton code mélange la syntaxe css dite “inline” (sans selecteur css) et la syntaxe classique (avec des selecteurs css). Il est indiqué dans la documentation que cela ne peut pas fonctionner, voilà une version corrigée:

:host {
  width:450rem;
}
@media screen and (max-width:900px) {
  :host {
    width: calc(100% - 100rem);
    margin-top : -40rem;
    margin-left : -60rem;
  }
}

J’ai également remplacé les occurrences d’unités en px par des rem (sauf dans la ligne @media)

References :

3

D’accord merci cela fonctionne parfaitement.
Y a t’il un moyen d’empêcher l’appui d’un bouton si l’on veut simplement défiler l’écran ?
Merci

4

Tu peux utiliser les barres de défilement si tu veux être sûr de ne pas appuyer sur un bouton. Il y a toutefois un petit bug que ta question m’a permis de trouver : la barre de défilement horizontale en bas de l’interface ne répond pas correctement, particulièrement sur les petits écrans. Le correctif sera inclus dans la prochaine version.

5

Merci pour ces réponses qui m’ont permis de bien avancer.
Actuellement je n’arrive pas à changer le nom des label quand je passe en dessous d’un max-width, est-ce possible ?
En JS j’aimerais pouvoir créer une forme mais quand je crée une forme elle n’apparait pas. Peut-ont incruster des formes etc dans un modal ou autre ?

Merci d’avance

6

Actuellement je n’arrive pas à changer le nom des label quand je passe en dessous d’un max-width, est-ce possible ?

Il y a une méthode qui marche, mais c'est peu sale, je ne sais pas si ça marche dans tous les cas (et je ne peux pas garantir que ça marchera dans des versions futures) :

@media screen and (max-width:900px) {
 .label {
    font-size:0px;
  }
  .label:before {
    content: "Alt label";
    font-size: 11rem;
  }
}

En JS j’aimerais pouvoir créer un forme mais quand je crée une forme elle n’apparait pas.

La syntaxe JS ne permet pas de créer quoi que ce soit, elle permet seulement de définir les propriétés des widgets de façon dynamique en utilisant des fonctions mathématiques par exemple.

7

Merci pour ces réponses rapide.