Return to site

Responsive Recommendations

Styling recommendations to look great on mobile phones and tables

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%.

Recommendations styled for desktop

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%; } }

Recommendations on mobile
All Posts

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!