Styling

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!