Search Banner image cuts off on smaller screens

Dev
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: Cascading Style Sheets | 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: Make CSS changes on Your Site

6 Likes