Responsive recommendations

Recommendations Themes CSS

You can use Custom CSS to ensure your recommendation widgets look good on all screen sizes, using @media.

For example, you can have different product widths according to the screen size so that instead of squashing up on a small screen, they wrap. Here's an example where on large screens the product width is set to be 33%.

Standard layout

With the following CSS we can make the three recommended products stack on top of each other on a mobile screen

@media (max-width: 500px) {
  .betterrecs-purpose-product .betterrecs-product {
    width: 100%;
  }
}

Mobile layout

Find us on Shopify