You have two options:
1. Set grid columns.
/*
If you are using a different plugin style, you will
need to change the .glsr-default class to match
the one used by the style.
*/
.glsr-default .glsr-reviews {
column-gap: 2rem;
grid-template-columns: repeat(2, minmax(0, 1fr)); /*2 columns*/
}
2. Override display:grid
Using grid columns will make the columns in each row the same height. If this is not what you want, then you can override display:grid with a different display property. For example:
.glsr-default .glsr-reviews {
display: flex;
flex-wrap: wrap;
}
Tip: make sure to run any custom CSS through https://autoprefixer.github.io to make sure you are including vendor prefixes for older browsers.
-
This reply was modified 5 years, 6 months ago by
Gemini Labs.
Here’s another tip:
You can use this custom CSS:
.glsr .glsr-reviews.two-columns {
column-gap: 2rem;
grid-template-columns: repeat(2, minmax(0, 1fr)); /*2 columns*/
}
.glsr .glsr-reviews.three-columns {
column-gap: 2rem;
grid-template-columns: repeat(3, minmax(0, 1fr)); /*3 columns*/
}
And then add the two-columns or three-columns class to the Reviews block or shortcode as needed.
That isn’t working for me. Here is my previous css that used to work.
.glsr-review {
margin-bottom: 10px!important;
display: inline-block;
padding: 30px 30px 30px 30px;
vertical-align: text-top;
background-color: #F9F9F9;
width: 33%;
}
@media only screen and (max-width: 768px) {
.glsr-review {
margin-bottom: 10px!important;
width: 49%;
}
}
@media only screen and (max-width: 360px) {
.glsr-review {
margin-bottom: 10px!important;
width: 99%;
}
}
[site_reviews count=6 pagination=ajax]
this used to work and compensated for mobile views, but I can’t get it to work with your CSS nor can I get your css to work by itself to make different columns.
-
This reply was modified 5 years, 6 months ago by
ekaboom.
It works for me, this is what I did:
1. Used the following custom CSS:
.glsr .glsr-reviews.review-columns {
column-gap: 10px;
}
.glsr .glsr-reviews.review-columns .glsr-review {
background-color: #F9F9F9;
display: block;
padding: 30px;
}
@media only screen and (min-width: 361px) {
.glsr .glsr-reviews.review-columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media only screen and (min-width: 769px) {
.glsr .glsr-reviews.review-columns {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
I ran the CSS through https://autoprefixer.github.io and then put the resulting CSS in the “Additional CSS” section of the WordPress Theme Customizer.
2. Added the review-columns class to the shortcode like this:
[site_reviews class=”review-columns”]
Or in your case:
[site_reviews class=review-columns display=6 pagination=ajax]
If you don’t want to do that and just keep it like before, you can do this:
.glsr-reviews {
display: block !important;
}
.glsr-review {
display: inline-block !important;
}
Thanks so much! That worked.
I do like your first version better too so that the background blocks are the same size.
I appreciate your help in figuring it out. I was really struggling with getting it to work.
Great!
Yes, CSS grid layout is much better for column view once you get the hang of it.
Hi all,
I just tried to apply the proposed solutions but in my case it doesn’t work. I am fairly new to editing of css so I am sure I am missing something.
I am working with Divi and have the divi style set within the settings.
When I add custom css, save that and reopen the custom css (of the page) I get errors such as EXPECTED RBRACE on certain rows. I pretty much tried all of the css codes and also tried combining it with the shortcode addons.
I know this sounds very foolish, so I hope you are able to help me with this. Thank you in advance. I really appreciate it!
