Pallier aux différentes résolutions
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Pallier aux différentes résolutions
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!
Re: Pallier aux différentes résolutions
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.
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.
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Pallier aux différentes résolutions
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
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
Re: Pallier aux différentes résolutions
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 ?
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 ?
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Pallier aux différentes résolutions
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
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
Re: Pallier aux différentes résolutions
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.
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.
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Pallier aux différentes résolutions
Oui ! Pas de soucis, voici !
Et wow ! Merci pour les tips je prend note
Et wow ! Merci pour les tips je prend note
Re: Pallier aux différentes résolutions
(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.
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.
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Pallier aux différentes résolutions
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
Pas de soucis, merci beaucoup pour votre attention et prenez soin de vous !
Oui, merci ! Ca va partir là dessus pour le moment
Re: Pallier aux différentes résolutions
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!
Prenez soin de vous!
Re: Pallier aux différentes résolutions
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 ^^
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 ^^
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Sujets similaires
» Visualiser un design sous différentes résolutions d'écran
» Logo qui s'adapte à différentes résolutions tout comme ma bannière
» Concours: La meilleure liste de bonnes résolutions !
» Résolutions d'écran
» Adaptation entre résolutions
» Logo qui s'adapte à différentes résolutions tout comme ma bannière
» Concours: La meilleure liste de bonnes résolutions !
» Résolutions d'écran
» Adaptation entre résolutions
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum