L'image du banner de recherche est coupée sur les écrans plus petits

Dev
1

Salut. J’ai installé le composant de thème officiel : Advanced Search Banner et il est utile. Une seule chose m’agace. J’ai téléchargé une image d’arrière-plan pour la bannière de recherche, mais elle semble s’ajuster en coupant la partie droite lorsque l’écran se rétrécit. Je ne sais pas comment décrire, mais voici quelques photos :

Ça rend bien.

image
image2674×492 125 KB

L’image couvre les textes.

image
image1612×382 78.2 KB

Et j’ai trouvé que la bannière de recherche pour Wyze était bien car l’image s’ajuste des deux côtés et ne couvre jamais le texte.

Ce composant peut-il être amélioré pour que l’image s’adapte aux différents appareils ? Merci !!

4 « J'aime »
2

Par défaut, c’est ainsi que le composant gère l’ajustement d’une seule image d’arrière-plan pour s’adapter à différents appareils. L’image d’arrière-plan est définie à l’aide de background-size: cover en CSS (plus d’informations ici : background-size - CSS | MDN).

Ainsi, par défaut, l’image d’arrière-plan utilisée sera redimensionnée pour couvrir toujours l’intégralité de l’arrière-plan du conteneur.

Une amélioration pourrait être d’ajouter une image mobile alternative à ce composant, mais même avec cela, il est probable que des sites individuels devront ajouter du CSS à certaines largeurs d’écran s’ils ont des exigences spécifiques en matière d’images d’arrière-plan (cela n’aiderait pas dans ce cas, car ce problème se produit à des largeurs supérieures à celles du mobile). Dans le cas de Wyze, ils ont une version personnalisée du composant installée pour répondre à leurs besoins spécifiques.

Pour les spécificités des modifications CSS, quelque chose comme ceci pourrait améliorer le comportement de l’image d’arrière-plan dans votre cas.

.search-banner .custom-search-banner-wrap {
   background-size: contain;
}

Vous pourriez également avoir besoin de définir des comportements différents à différentes largeurs, par exemple :

.search-banner .custom-search-banner-wrap {
  background-size: contain;
  @media screen and (max-width: 1000px) { // si l'écran est moins large que 1000px
   background: none; // masquer l'arrière-plan
  }
}

Si vous débutez, nous avons un guide qui pourrait vous aider : Making custom CSS changes on your site

6 « J'aime »