Pallier aux différentes résolutions

[Dellou]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis toujours
Lien du forum : https://wheel-and-deal.forumactif.com/

Description du problème

Bonjour forumactif !
Je reviens vers vous car j'ai un petit soucis de résolution entre moi et une autre fondatrice du forum sur son ordinateur ! J'ai essayé de me renseigner et de comprendre comment pallier à cette différence flagrante entre son rendu et le mien avec les @ medias, mais j'avoue je ne comprend pas du tout...
Par exemple, j'ai ça (ordi 17 pouces sous Chrome) :
https://i.imgur.com/pKsDJt5.png
Quand elle, à ça (ordi 13 pouces sous Brave) :
https://cdn.discordapp.com/attachments/410410920657944596/1128426218283343972/Capture_decran_2023-07-11_a_22.42.43.png

Sachant qu'elle à essayé d'être sous Chrome et c'est la même chose, c'est vraiment une différence de résolution.

Du coup, j'aimerais bien savoir si vous avez des informations sur les @medias pour que je puisse les comprendre j'ai essayé de me documenter dessus mais je comprend vraiment rien... ou s'il y avait peut être un autre moyen pour uniformiser tout ça ? L'idéal c'est que tous puissent avoir a peu près ma version  J'ai essayé d'utiliser des % et em à la place des pixel mais ça ne fonctionne pas  

Merci pour vos réponses!

[MlleAlys]

Bonjour,
A priori j'aurais effectivement dit de passer les largeurs en %, mais il y a un certain nombre d'éléments à corriger (et ça ne fonctionne pas pour les textes).
Sinon, je viens de découvrir les unités vw, vh, vmin et vmax, qui sont définies relativement à la hauteur et de la largeur de l'écran utilisé. Je n'ai jamais eu l'occasion de tester mais a priori ça fonctionne sur les blocs comme sur les textes. A vérifier si c'est supporté par la plupart des navigateurs.

[Dellou]

Bonjour,
Merci beaucoup pour votre réponse ! Je fais des test sur la PA avec ces nouvelles unités et malheureusement, ça ne change pas
Ce que j'ai :
https://i.imgur.com/TNXGpc7.png

Ce que quelqu'un a (15 pouces) :
https://cdn.discordapp.com/attachments/612052483874750487/1128713574265651220/image.png

J'ai essayé de mettre rien que la PA en % et pourtant ça ne fonctionne pas

[MlleAlys]

Avez-vous penser aux largeurs des contenants ? Aux margin et padding ?

Pour les parents, l'élément "#wrap" qui correspond à la "largeur du corps du forum" a une max-width fixe de 1400px. Le bloc contenant le message d'accueil (et d'autres éléments .panel) a un padding fixe de 18px et non en %.
Dans votre iframe, votre élément ".d-flex > div, .d-flex > div:last-child" a encore une largeur fixe de 100px et non en %. Votre image a une marge fixe de -5px, et non en %.
Etc...

Sinon, ça me parait tout de même très similaire comme rendu, qu'est ce qui vous bloque exactement ?

Comment comptez-vous gérer les cas extrêmes comme aperçu sur smartphones ?

[Dellou]

Alors déjà merci beaucoup !! C'est un méli melo de tout, le wrap, utiliser les %, utiliser des @ media, etc j'ai réussi à avoir le rendu que je veux avec votre aiguillages sur toutes les résolutions et même sur téléphone ! Je me suis beaucoup aidé de ce site qui permet de simuler une résolution en faisant inspecter directement dessus (je le file ici au cas où ça en intéresse certains!) https://barrazacarlos.com/free-seo-tools/fr/screen-resolution-simulator

Donc merci beaucoup à vous ! Il ne me reste qu'un dernier soucis   En fait, c'est à propos de la taille de la police de la PA et du padding autour... mes codes sont un peu crade, c'est du rafistolage/tâtonnages au moyen de mes connaissances donc ça ne doit pas aider haha, mais en gros, avec différentes résolutions et sur téléphone par exemple :

17 pouces :
https://i.imgur.com/NZbdauy.png

11 pouces :
https://i.imgur.com/2KuyBvi.png

Téléphone :
https://cdn.discordapp.com/attachments/410410920657944596/1128769897099428001/IMG_3030.png

Alors je me doute que le padding autour détruit un peu tout, mais je ne sais pas comment faire pour avoir un padding qui reste cohérent et ne casse pas l'écriture/bloc..... J'ai essayé de mettre le padding en % mais c'est aussi assez bordélique... je continue mes recherches, si je trouve une solution je mettrais en résolu et merci encore Alys !! Si vous avez des conseils ou des idées pendant que je tâtonnes n'hésite pas  

edit :
C'est aussi une question de taille de police, si je met un padding de 6%, sur un écran de 6 pouces l'écriture est trop grande...
https://i.imgur.com/U6Thp1R.png
J'essaie de voir si je peux arranger ça avec des @media screen

[MlleAlys]

Est-il possible d'avoir le code de votre PA pour tester des choses ? (en hide si vous préférez)

Si vous êtes sur chrome et si vous avez un peu l'habitude des outils d'inspection, vous avez également dans un coin une icone permettant de faire assez simplement des simulations de différentes tailles d'écrans (surement sur les autres navigateurs aussi mais je les connais moins).

Et une autre possibilité sur les téléphones et autres petits écrans, c'est de passer l'image au dessus ou en dessous du texte, pour gagner un peu en largeur pour celui-ci.

[Dellou]

Oui ! Pas de soucis, voici !



Et wow ! Merci pour les tips je prend note

[MlleAlys]

(et voilà que de mon côté j'ai un souci avec des media queries qui ne sont pas prises en compte quand je paramètre des largeurs inférieures à 1000px... Et je n'ai aucune idée de pourquoi ! )

Je risque d'être peu présente les 10 prochains jours.

En attendant pour éviter les débordements de texte moches ou illisibles, vous pouvez appliquer un overflow:auto; qui permettra de cacher ce qui déborde mais pouvoir faire défiler.

[Dellou]

Oui, j'ai également essayé et j'ai le même soucis !

Pas de soucis, merci beaucoup pour votre attention et prenez soin de vous !

Oui, merci ! Ca va partir là dessus pour le moment

[Dellou]

Après du codage jusqu’à 3h j’ai réussi à pallier autrement au problème ! Fiouf ! J’ai encore quelques galères mais rien en rapport avec ma demande initiale donc je peux mettre le sujet en résolu Si j’ai réussi c’est aussi grâce à votre aide Alys ! Merci infiniment !!!

Prenez soin de vous!

[MlleAlys]

Bravo à vous, je n'ai pas fait grand chose.
Par contre il peut être intéressant que vous indiquiez quelle ethode vous avez utilisée, de façon à aider les prochaines personnes qui cherchaient de l'aide sur le même problème ^^