Center justify star rating in review widget

I’m using ‘All-in-one reviews’ widget. I can center justify the review text, but not the star rating.

2 Likes

Hi @Mark_Day1

try this.

.es-rating-container {
  justify-content: center;
}
2 Likes

Thanks, that was quick! Yes, that worked (though actually after trying it I realised that left justify looked better …)

2 Likes

Hi there, @Mark_Day1 :wave:

Glad to hear that the provided code worked for you! If any further assistance is needed, we are always here to help :wink:

@Sina, a huge thank you for your quick help!

1 Like

That’s fine and I’m happy :upside_down_face:
Can you mark this as solution :clap:

grafik

2 Likes

@Mark_Day1
You can also try it to see if you like it better. :upside_down_face:

.es-review-content-text-container {
  text-align: center;
}

.es-review-author-block-container,
.es-rating-container {
  justify-content: center;
}
3 Likes

Aha, that’s the one! Great work! Yes, I am using your latest code, many thanks @Sina

3 Likes

Hello again, maybe @Sina can help with this related issue …

I came to look at my review plugin today and it was clear that the formatting still isn’t right. So I went into the Elfsight/ my apps/ all-in-one reviews page and noticed that there is an unwanted left margin being applied. However, I don’t know what css class to target to get rid of it. I’m hoping that with the screenshot here, you will be able to tell me what custom css I need to add … many thanks.

2 Likes

Hi @Mark_Day1

I can’t access your widgets, and unfortunately, I can’t see anything in the screenshot.
Can you share your widget and post the link here or send it to me in a private message?
Otherwise, @Max will take a look at it, too.

2 Likes

Hi @Mark_Day1 :wave:

I’ve checked your widget and don’t see this left margin now:


Could you please confirm if everything is fine on your end?

1 Like

Thank you both @Sina and @Max and apologies for the delayed response - I didn’t have notifications turned on. Max has found the public page where the widget sits - Expert UK Immigration Advice | White Rose Visas. Do you need the private dash.elfsight.com URL as well?

To answer Max’s question, the fact is that at some widths there is no left margin, but at other widths the unwanted left margin is still there. Just try resizing the page horizontally, and you will see that unwanted left margin appear. That’s why I posted the initial screenshot, as I picked one of the ‘bad’ widths where the unwanted margin appeared.

I’m also attaching the screenshot again here, since you both said that previously you weren’t able to see it.
Thanks for your help!

2 Likes

Got it, thanks!

This code should fix the issue:

.es-review-align-container {
  margin-left: 0 !important;
}

Please add it to the Custom CSS field on the Style tab of your widget’s settings and let me know if it helped :slightly_smiling_face:

1 Like

Thanks Max, but sadly, that rule was already in my css. My custom css is currently below. It is a weird one. All looks completely fine on the dash.elfsight.com editor, but on my live site whiterosevisas.co.uk the annoying left margin is still present.

.es-review-content-text {
font-size: 0.9rem;
color: #4f4e4e;
}

.es-review-content-text-container {
text-align: center;
}

.es-review-author-block-container,
.es-rating-container {
justify-content: center;
}

.es-review-align-container {
margin-left: 0 !important;
}

2 Likes

The thing is that you haven’t published changes in your widget.

I’ve published and everything worked great. Could you please double-check it?

1 Like

Whoops, sorry for that oversight Max. Yes, I have checked now and all looks fine. Thank you for your help.

2 Likes

No problem!

In the meantime, I’d like to remind you about our Giveaway, where you can win 3 FREE months for your subscription.

Check the details and join in :wink: - April Giveaway: Celebrate 80K Members with Us & Win 3 FREE Months! :heart_eyes:

1 Like