Hello @stefanoid3,
Yes, you can do this is you’re good with styling.
The reviews are in the form of a unordered list. You can set the <ul> to display: flex; flex-wrap: wrap; and set the flex for each <li> to something like: flex: 1 0 21%; margin: 0 1% 10px 0;. This is off the top of my head but there is an example at Common CSS Flexbox | Tobias Ahlin.
Please post your finished result here and I may add a variant to the plugin as a future theme!
All the best,
Noah
Thank you for the reply, i’m still working on it. @designextreme are there any options to remove the heading and vicinity without css?
I tried summary of but it still leaves the gap there..
Thanks a lot, definitely a review from me
Yes, this is simply:
[reviews_rating summary=0]
The entire summary section is removed; it’s not hidden using the stylesheet. The HTML would look something like…
<div class="google-business-reviews-rating">
<ul class="listing">
<li class="rating-5">
<span class="author-avatar"><a href="#" target="_blank"><img src="photo.jpg" alt="Avatar"></a></span>
<span class="author-name"><a href="#" target="_blank">Alpha</a></span>
<span class="rating">★★★★★</span>
<span class="relative-time-description">a week ago</span>
<div class="text">Review text goes here</div>
</li>
<li class="rating-5">
<span class="author-avatar"><a href="#" target="_blank"><img src="photo.jpg" alt="Avatar"></a></span>
<span class="author-name"><a href="#" target="_blank">Beta</a></span>
<span class="rating">★★★★★</span>
<span class="relative-time-description">a week ago</span>
<div class="text">Some different review text goes here</div>
</li>
</ul>
<p class="attribution"><span class="powered-by-google"></span></p>
</div>
@stefanoid3 Thanks for the ★★★★★ review!
If you wish, you can send me a URL of the page you’re editing? I would like to see how the stylesheet is leaving a gap.
@stefanoid3 In version 2.2, I’ve added new themes to support 2, 3 and 4 column views. Enjoy!
