The issue occurs because the Smart Search & Filter app uses the theme template to show search results. Sometimes, the template itself is too narrow.

You can fix it by making the page container of your theme template wider for the Search Results Widget, using the Custom CSS feature. A page container is a block that wraps the main content of your website.

To change the width of the search results page container, follow these steps:

Important
This is not an universal solution and additional adjustments might be needed in some cases, so don't hesitate to contact us. We will be happy to assist.
  1. Go to the Smart Search & Filter control panel > Search results widget section > Custom CSS tab. 
  2. Enable the Use custom CSS setting if it was switched off.
  3. Enter CSS rules to change the width of the widget's page container, as in the example here: 
    .snize-results-page .container--tiny {
    max-width: 1600px;
}
    Notes
    • .snize-results-page - the CSS class of the Search Results Widget, which wraps the main content including the page container, so the changes will happen in the widget only.
    • .container--tiny - the example of a CSS class of a page container. It varies from theme to theme. You need to paste the CSS class of the theme page container here. 
  4. Apply the changes 

That's it. The new styles are now applied. You can now go to your storefront and check out how it looks.