How to fix border-box on mobile for vertical card (menu items)?

Search Best Practices - Search Front-End
1

Does anyone know how to fix the border-box on mobile for a vertical card? I’m having issues with my menu item card (screenshot attached) and not sure what to target in my answers.scss file.

cafishgrill-mobile-border-box-issue.PNG
cafishgrill-mobile-border-box-issue.PNG1125×2436 320 KB

2

Hi John,

There’s a class you can add to in your page’s hbs template called Answers-resultsWrapper--withFilters that’ll give the cards & facets a bit more breathing room. Example below:

  <div class="Answers-container Answers-resultsWrapper Answers-resultsWrapper--withFilters">
    {{> templates/vertical-standard/markup/spellcheck }}
    <div class="Answers-filtersAndResults">
      {{!-- <div class="Answers-filtersWrapper"> --}}
        {{!-- {{> templates/vertical-standard/markup/sortoptions}} --}}
        {{!-- {{> templates/vertical-standard/markup/filterbox}} --}}
        {{!-- {{> templates/vertical-standard/markup/facets}} --}}
      {{!-- </div> --}}
      {{> templates/vertical-standard/markup/verticalresults }}
    </div>

This will allow the facets to extend outside of the width of the search bar, and should improve the mobile styling. Let me know if that helps!

3

Thanks, @afarooque! Appreciate the help.