Add ability to control font size

Wishlist Calculator
1

When using the calculator I cannot increase the font currently and it would be nice to be able to control that so I can make it easier to read when embedding it on a wix site. For some reason when using the slider the text gets extremely small on the results.

2 Likes
2

Hello @Erin_Dittner :wave:

Thank you for adding your idea to the Wishlist!

I do see your point, and I’m very sorry that our widget doesn’t support this feature. We’ll try consider implementation of the font size settings. We’ll keep you posted here :slightly_smiling_face:

As for now, our devs will gladly customize the widget for you. Do you want to increase the font size of the text in Results section only or you need it for all widget elements?

3

It would be wonderful to have the ability to choose font sizes for all the text and numbers.

4

Hi there @user13761 :wave:

I couldn’t agree more that it would be awesome to have this opportunity right in the settings. We’ll try to think about it in the future :slightly_smiling_face:

As for now, our devs will be happy to provide you with a custom code for you. I’ll get back to you once I receive a response form them :slightly_smiling_face:

5

@user13761 Thank you for waiting!

This code will help you adjust the font of all widget’s elements:

/*Title*/
[class*="header__Container-sc"] > div:nth-child(1) {
  font-size: 25px !important;
}
/*Subtitle*/
[class*="header__Container-sc"] > div:nth-child(2) {
  font-size: 25px !important;
}
/*Slider label*/
[class*="slider__Label-sc"] {
  font-size: 35px !important;
}
/*Slider label range*/
span[class*="slider__Label-sc"] {
  font-size: 25px !important;
}
/*Slider value*/
[class*="TextControlBase__TextControlBaseInput-sc"] {
  font-size: 15px !important;
}
/*Result section - titles*/
[class*="result-primary__PrimaryContainer-sc"] > div:nth-child(1) {
  font-size: 25px !important;
}
/*Result section - subtitles*/
[class*="result-primary__PrimaryContainer-sc"] > div:nth-child(3) {
  font-size: 25px !important;
}
/*Result section - values*/
[class*="result-primary__PrimaryContainer-sc"] > div:nth-child(2) * {
  font-size: 15px !important;
}
/*Result section bottomTitle*/
[class*="cta__Container-sc"] > div:nth-child(1) {
  font-size: 15px !important;
}
/*Result section bottom first paragraph*/
[class*="cta__Container-sc"] > div:nth-child(2) strong:nth-child(1) {
  font-size: 25px !important;
}
/*Result section bottom second paragraph*/
[class*="cta__Container-sc"] > div:nth-child(2) strong:nth-child(4) {
  font-size: 25px !important;
}
/*Result section button*/
[class*="ButtonBase__Ellipsis-sc"] {
  font-size: 25px !important;
}

Just add it to the Custom CSS field on the Settings tab of your widget’s settings and let me know if it helped :wink: