One Review On Mobile View

By default the app will display a 3 review wide row as a vertical list when viewed on a mobile device. Some people would like to change it to showing only 1 when on mobile. There is a way to do it, but it's a little bit tricky. Basically, you will create 2 templates and add some custom CSS to each template. The CSS will show or hide the template based on the width of the screen. This way you can set the second template to only show one review per a row.

For example:

I created two templates. The first one with ID #10 (you can see the id in the template list) and another with ID #13. I want to show the #10 template on large screens and the #13 on small screens. This is what I add to the Custome CSS for each.

#10 CSS:

@media screen and (max-width: 600px) { #wprev-slider-10 { visibility: hidden; display: none; } #wprs_nav_10 { visibility: hidden; display: none; } #wprs_nav_arrow_10 { visibility: hidden; display: none; } }

#13 CSS:

@media screen and (min-width: 600px) { #wprev-slider-13 { visibility: hidden; display: none; } #wprs_nav_13 { visibility: hidden; display: none; } #wprs_nav_arrow_13 { visibility: hidden; display: none; } }

You need to make sure you change the 10 and 13 in the CSS code to match your template numbers. Also, you can change the width to your liking.