Adjusting the Width of Cards when Adding Facets

[Austin_DaCunha]

Hi All,

I’ve successfully added Facets into my experience utilizing the instructions in the Advanced Frontend - Facets and Filters module. As you can see in the first screenshot below, the results in Product Vertical search look a little crammed when comparing to how the Product results look on Universal search (second screenshot below).

It seems as though the content is being crammed underneath the Nav Bar of the Answers experience. Is it possible to adjust the width of the Product card to stretch across the width of the Nav Bar (similar to the Universal Search example below) and push the filters out to the left hand side of the page?

Thank you!
Austin

Vertical Search Example

Universal Search Example

[Alyssa_Hubbard]

Hi Austin,

Great question! You can make two adjustments for this:

1. in your hbs file there is a line commented out that says to Add "Answers-resultsWrapper--withFilters" to this class list if you want to include filters or facets
   First add --withFilters to the resultsWrapper. You will also want to uncomment out <div class="Answers-filtersWrapper"> </div>

See here for a screenshot of the full code:

2. You can then add any appropriate CSS styling to adjust the margins as such:
   .Answers-filtersWrapper {
   margin-right: 1rem;
   margin-top: 2rem;
   }

Hope that helps and thanks for flagging this!