Search Banner image cuts off on smaller screens

Development

AI-generated summary

Sherran reports that the official Search Banner theme component cuts off the right side of the background image on narrower screens, sometimes obscuring text. They note that Wyze has a better implementation that adjusts from both sides. awesomerobot explains that the component uses background-size: cover by default, which resizes images to fill the container but may crop edges. They suggest custom CSS changes — such as using background-size: contain or hiding the background on smaller screens — to improve behavior. They also note that Wyze uses a customized version of the component and provide a guide for making CSS changes: How to Make CSS Changes on Your Site.

1

Hi. I installed the official theme-component: Advanced Search Banner and it’s helpful. Only one thing annoys me. I uploaded a background image for the search banner, but it seems to adjust itself by cutting off the right part when the screen narrows. I don’t know how to describe but here are some pics:

Looking good.

image
image2674×492 125 KB

Image covers the texts.

image
image1612×382 78.2 KB

And I found the search banner for Wyze is good because the image adjusts itself from both sides and won’t cover the text anyway.

Can this component be improved so the image will adjust to fit different devices? Thanks!!

2

By default this is the way the component handles adjusting a single background image to fit different devices. The background image is set using background-size: cover in CSS (more info here: background-size CSS property - CSS | MDN).

So by default the background image used will be resized to always cover the entire background of the container.

One enhancement could be made to add an alternative mobile image to this component, but even with that it’s likely that individual sites will have to add some CSS at certain screen widths if they have specific background image requirements (it wouldn’t help in this case, because this issue is happening at widths that are wider than mobile). In Wyze’s case, they have a customized version of the component installed to support their specific needs.

For the specifics of making the CSS changes, something like this might improve the behavior of the background image in your case.

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

You may also need to set different behaviors at different widths, for example:

.search-banner .custom-search-banner-wrap {
  background-size: contain; 
  @media screen and (max-width: 1000px) { // if the screen is less than 1000px wide
   background: none; // hide the background
  }
}

If you’re new to this, we have a guide that may help: Making custom CSS changes on your site