Modifier la taille de la bannière parallaxe sur mobile

Question

J'ai eu une très bonne expérience sur ce blog il y a quelques mois donc j'espère que quelqu'un sera assez bon pour être me aider encore une fois :)

Je travaille sur un site Web sur Squarespace et ont un problème avec les bannières sur mobile. Voici mon site: https://sim-zuk-zrdc.squarespace.com

Le problème que je rencontre est que la bannière zoome trop sur l'image sur le mobile, coupant des parties importantes de l'image. J'ai donc trouvé un code qui leur montrait la taille réelle. Cependant, il ajoute un rembourrage supplémentaire que je ne veux pas. Voici le code qui devient moi à mi-chemin:

@media only screen 
 
and (max-width: 640px) 
 
{ .image-container.content-fill { max-height: 300px; }}

Si vous vérifiez sur vos mobiles, les images sont maintenant en taille réelle, mais maintenant que je reçois ces horribles, grands espaces blancs. (J'ai également joint une photo CLICK ME)

Est-ce que quelqu'un sait comment résoudre ce problème? PLEAAAAAAASE :)

Merci beaucoup à l'avance

Answer 1

Vous utilisez le Marquee template droit?

La raison pour laquelle vous voyez l'espace ou les bandes blancs entre vos images de parallaxe est que vous ne contrôlez que la hauteur du conteneur d'images <div> et non le <img> lui-même. La classe content-fill dans Squarespace est une classe utilisée par l'utilitaire de chargement et de recadrage ImageLoader YUI (javascript) de Squarespace qui dimensionne dynamiquement l'image pour l'adapter à son conteneur. Pour cette raison, vous ne pouvez contrôler que la taille du conteneur et non le <img> lui-même, sauf si vous activez le mode Développeur de Squarespace. Je suis sûr que vous devrez personnaliser les fichiers modèles pour l'affichage d'index de Marquee en supprimant la classe content-fill et en ajoutant une classe ImageLoader pour la taille de mobile correcte, puis en utilisant YUI/js pour recharger les images lorsque la fenêtre est redimensionnée.

Utilisez-vous le mode développeur?