Ciao. Ho installato il tema-component ufficiale: Advanced Search Banner ed è utile. Solo una cosa mi infastidisce. Ho caricato un’immagine di sfondo per il banner di ricerca, ma sembra che si regoli tagliando la parte destra quando lo schermo si restringe. Non so come descriverlo, ma ecco alcune immagini:
Per impostazione predefinita, questo è il modo in cui il componente gestisce l’adattamento di una singola immagine di sfondo a diversi dispositivi. L’immagine di sfondo è impostata utilizzando background-size: cover in CSS (maggiori informazioni qui: background-size - CSS | MDN).
Quindi, per impostazione predefinita, l’immagine di sfondo utilizzata verrà ridimensionata per coprire sempre l’intero sfondo del contenitore.
Si potrebbe apportare un miglioramento aggiungendo un’immagine mobile alternativa a questo componente, ma anche in quel caso è probabile che i singoli siti debbano aggiungere del CSS a determinate larghezze dello schermo se hanno requisiti specifici per le immagini di sfondo (non aiuterebbe in questo caso, poiché questo problema si verifica a larghezze maggiori rispetto a quelle mobili). Nel caso di Wyze, hanno installato una versione personalizzata del componente per supportare le loro esigenze specifiche.
Per i dettagli sulla modifica del CSS, qualcosa di simile potrebbe migliorare il comportamento dell’immagine di sfondo nel tuo caso.
Potrebbe anche essere necessario impostare comportamenti diversi a larghezze diverse, ad esempio:
.search-banner .custom-search-banner-wrap {
background-size: contain;
@media screen and (max-width: 1000px) { // se lo schermo è largo meno di 1000px
background: none; // nasconde lo sfondo
}
}
