Search Banner image cuts off on smaller screens

Dev
1

Hi. I installed the official theme-component: 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!!

4 Likes
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