Hello tout le monde et bonne année ! 🎉
Je commence 2025 avec un petit bug de breakpoints qui me fait vriller : https://mobsuccess-rework.webflow.io/
La section "notre vision" (sous le hero) de ce site fonctionne nickel en responsive sur Chrome et Firefox, mais sur Safari l'affichage pète un câble 👌
J'ai pas de custom code sur cette section donc je vois pas d'où ça peut venir...
Le read-only link est ici : https://preview.webflow.com/preview/mobsuccess-rework?utm_medium=preview_link&utm_sour[…]k&preview=57ce5891f9472a366e658467c36c58d8&workflow=preview
Merci d'avance à la personne qui pourra m'aider 🙏
@Valentin Geffroy je te laisse checker les 2 captures que j'ai faites, c'est des captures de l'écran entier et sur Safari ça sort du wrapper 🙂
C’est “normal” que ça pète, tu as forcé un ratio sur la card (2/3) tout en mettant une height à 100%. Tu peux mettre auto
Du coup, Safari (mais en vrai ça devrait péter partout) n’arrive pas à savoir ce que tu veux faire
@Sébastien Wozny Je suis l’échange car je bataille souvent avec mes layouts 😅 Je présume que @Bazil veux conserver un format “carte de jeux” dans son responsive mais même en augmentant le MinH ça ne donne pas l’aspect souhaité non !?
S’il force l’aspect-ratio de la card, c’est “contraignant”, cad que même si le contenu a l’intérieur dépasse, la card restera dans le ratio forcé et le contenu va dépasser.
C’est pas une très bonne pratique de forcer l’aspect-ratio sur ce genre d’éléments car si le client modifie le contenu ensuite, bah la card peut partir en sucette. Idem si le site est traduit dans une autre langue avec des mots qui deviennent à rallonge.
A partir du moment on on “force” un aspect-ratio, on sort un peu d’un web responsive. C’est un peu comme le “absolute”, c’est à utiliser avec parcimonie.
Un aspect-ratio ça a plutôt pour utilité d’être sur des images ou des vidéos pour qu’elles conservent toutes leurs propriétés. C’est cheum une vidéo 16/9 affichée en square si en + y a du texte dedans quoi.
Si vous tenez vraiment à conserver un aspect ratio fixe alors il faut un controle total de ce qu’il y a dans la card : Croper le texte s’il dépasse x lignes, etc. Mais la on commence à péter l’accessibilité 😛
En gros, je déconseille vivement. ici à sa place je mettrais un min-height qui mimic un peu l’aspect-ratio tout en permettant d’en sortir si le contenu est + grand pour x ou y raison.
Mais si VRAIMENT, VRAIMENT il veut utiliser l’aspect-ratio, alors une solution serait de passer sur du em pour que le contenu des cards scale correctement et aient toujours le même aspect
il n’empêche que si on utilise un aspect-ratio, il faut quand même éviter de forcer la width et la height, sinon le browser il peut pas capter
Ah mais oui mais complètement... Merci beaucoup, c'était comme souvent une erreur bête 😅
Et bien noté pour les conseils sur l'aspect ratio, là pour le coup le contenu va pas être amené à changer et c'est eux qui souhaitaient un tel rendu donc je vais rien toucher mais je notes ces conseils précieusement, merci beaucoup @Sébastien Wozny
