Olá. Instalei o tema-componente oficial: Advanced Search Banner e ele é útil. Apenas uma coisa me incomoda. Carreguei uma imagem de fundo para o banner de pesquisa, mas parece que ele se ajusta cortando a parte direita quando a tela diminui. Não sei como descrever, mas aqui estão algumas imagens:
Por padrão, esta é a forma como o componente lida com o ajuste de uma única imagem de fundo para se adequar a diferentes dispositivos. A imagem de fundo é definida usando background-size: cover em CSS (mais informações aqui: background-size - CSS | MDN).
Portanto, por padrão, a imagem de fundo usada será redimensionada para cobrir sempre todo o fundo do contêiner.
Uma melhoria poderia ser feita para adicionar uma imagem móvel alternativa a este componente, mas mesmo assim é provável que sites individuais tenham que adicionar algum CSS em certas larguras de tela se tiverem requisitos específicos de imagem de fundo (não ajudaria neste caso, pois este problema está ocorrendo em larguras maiores que as móveis). No caso da Wyze, eles têm uma versão personalizada do componente instalada para suportar suas necessidades específicas.
Para os detalhes de como fazer as alterações de CSS, algo como isto pode melhorar o comportamento da imagem de fundo no seu caso.
Você também pode precisar definir comportamentos diferentes em larguras diferentes, por exemplo:
.search-banner .custom-search-banner-wrap {
background-size: contain;
@media screen and (max-width: 1000px) { // se a tela tiver menos de 1000px de largura
background: none; // ocultar o fundo
}
}
