Responsive search-banner

Hello community! This time I have a question regarding the search-banner, is it possible that it is responsive? Can you create a banner for mobile and another for desktop?


I found this paragraph in the documentation you shared:

Now, you can add the last three search blocks: search-banner, did-you-mean and search-suggestions.

Those blocks, differently from autocomplete-result-list.v2, need to be added under the search-result-layout.desktop or the blocks, according to the Search Results block hierarchy.

I didn’t test it, but from that I understand that the answer is yes:

  • search-result-layout.desktop should be used for the desktop layout
  • should be used for the mobile layout

Each search-banner should be listed as one of the children for those blocks. The example below the paragraph I highlighted above illustrates that:

  "search-result-layout.desktop": {
    "children": [
    "props": {
      "pagination": "show-more",
      "preventRouteChange": true,
      "mobileLayout": {
        "mode1": "small",
        "mode2": "normal"

  "flex-layout.row#did-you-mean": {
    "children": ["did-you-mean"]
  "flex-layout.row#suggestion": {
    "children": ["search-suggestions"]
  "flex-layout.row#banner-one": {
    "children": ["search-banner#one"]

  "search-banner#one": {
    "props": {
      "area": "one",
      "blockClass": "myBanner",
      "horizontalAlignment": "center"
1 Like

Hi George.

Thanks for answering!

Yes you’re right. And that I did, but that only guarantees that the banner is also displayed for mobile, I can’t differentiate the image that is displayed on mobile from the one that is displayed on desktop, or at least I don’t know how to do it.

When configuring the banner in the admin I can only place an image.

1 Like

I already found the solution:
The block lets you put in html code, so I set it up out there by doing…

<style type="text/css">
@media screen and (max-width:800px) {
            display: none;
@media screen and (min-width:800px) {
        display: none;
<a href="/"><img class="mobile" src="/arquivos/banner-nike-mob-test.png"/>
<img class="desktop" src="/arquivos/banner-nike-test.png"/></a>
1 Like

Awesome! Great job investigating, thanks for sharing your solution with us!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.