Pb de responsive

Hello à tous !

Je voudrais savoir pourquoi quand je change de vue, rien de se passe au niveau de l’interface. Quelquesoit l’icône sur lequel je clique (telephone, tablette ou ordi), je vois la règle se redimensionner en fonction de la largeur de la vue sélectionnée mais l’interface ne change pas.

Même si je suis sur la vue téléphone, je vois l’interface ordinateur. Je vous mets un screen en PJ.

Par ailleurs, est ce que vous auriez des tutos pour expliquer le responsive sur Bubble. Je comprends vraiment pas du tout comment il fonctionne. Je n’arrive à rien et malgré les tutos que j’ai vu, revu et rerevu, je ne comprends vraiment rien du tout … Je ne vois pas du tout comment configurer les pages et les éléments pour que ce soit responsive.

Hello @guillemcotcha

Le responsive n’est pas forcément facile à prendre en main sur Bubble. Tu as plusieurs solutions effectivement :

1 - Monopage : Gérer tous tes éléments sur une même page en jouant sur le redimensionnement en fonction de la taille de l’écran. Tu peux jouer aussi sur les conditionnelles d’affichage de certains éléments, tu as des conditionnelles de type “When page width is…”. Attention : Pour le redimensionnement il faut que tes éléments ne soient pas en “fixed width”.

2 - 2 pages : Tu crées une seconde page que tu vas nommer “page_name_mobile”, et dans l’interface de la première page (page desktop donc) tu vas avoir un petit menu mobile version comme ceci : Capture d’écran 2021-03-25 à 10.50.37

Tu as juste à sélectionner ta page qui devient ta version mobile. Dès que Bubble reconnaît un écran d’affichage taille mobile, il envoie ton utilisateur sur la page mobile et vice-versa.

Pour mon app j’ai mixé les deux pour adapter les deux pages aux différentes tailles d’écran.

Dernier tips : Tu peux utiliser le plugin chrome / firefox [Responsive viewer] (https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb). Il te permet d’ouvrir ta page sur plusieurs formats d’écran mobile et desktop en même temps pour regarder si tout est responsive correctement.

1 Like