All-in-One Reviews Widget: How to set a fixed width and a fix for font changes not applying on our website

Ask the Community Customization
,
1

Hello,

Currently, the All-in-One Reviews widget doesn’t allow us to change its width or height—it automatically adjusts to the text in the description. Additionally, when we try to change the font to more closely match the text on our website, the font updates in Elfsight, but doesn’t reflect on the embedded widget on our Squarespace website.

I’m wondering if you have a fix or a custom CSS solution that would allow us to:

  1. Set a fixed width of 400px, regardless of the text in the description.

  2. Apply a custom font that correctly displays on the embedded widget.

Any guidance would be greatly appreciated!

Best regards, Michael

3

Hi @Michael_Surnak :waving_hand:

Sure, we can totally fix up the Reviews for you to match your vision!

First, let’s talk about font. If I got it right, you want your widget font to look similarly to the content you have on the website. If so, I’m glad to let you know that the Default (Apply from Website) option of the Font setting is perfect for you, as it pulls the font directly from the page it’s installed on :tada:

And this is what your widget looks like with this setting:

image
image1574×376 40.3 KB

I hope this is what you were searching for :slight_smile: But if not, please let me know – I’ll help you customise it the other way if you need.

Speaking of width, I’ll ask the developers to help me with the CSS code to achieve that. Will get back to you soon.

Stay tuned!

7

Hi Irene,

Thank you for your quick follow-up.

Regarding the font, the “Default (Apply from Website)” option is pulling through, but because the writing is quite small, our website header text doesn’t fit well. We’d prefer it to match our body text instead, and Arial is probably the closest match from the available options.

I appreciate you checking with the developers about a solution for the width.

Thank you again for your help.

Update: Danis provided us with a custom CSS solution for the font which works great. So it’s only the width that’s an issue now.

h4, h5 {

font-family: var(–meta-font-font-family);

}

Best regards,
Michael

1 Like
9

Thank you for sharing the font solution!

And I’m back with the CSS for making the width of the widget 400px:

.es-main-container,
.es-badge-container {
  width: 400px;
}

We already applied it to the widget, so feel free to check it out :smiling_face:

2 Likes
10

Excatly what we were after! Thank you Irene, very much appreciated.

2 Likes