With Custom CSS Code you can go even further with styling your calculator.
Warning: This is a powerful feature that comes with responsibilities. You can change how your calculator looks or works here, so make sure you know what you're doing.
The custom CSS code will not be visible in the calculator builder, just on the preview page or the live calculator.
If you need to customize certain questions only, you can assign them a css class (or more) by clicking on them and going to the Style tab / CSS Class.
All the calculator fields that you can drag from the left side into the calculator stage have the "ic-question" CSS class.
The calculator parent has the class "ic-calculator". After the calculator is submitted (through clicking a button), the calculator gets the extra class "ic-calculator-submitted".
Each question's title (aside from buttons) is a HTML label with the class "ic-label"
Each question has a pre-defined class, here's a list:
Normally the calculator will inherit the font from the page it's loaded on, but sometimes you may need to manually change the font (if you load the calculator in an iframe or you need a different font from your website's).
To change the calculator font you need to add this custom CSS Code, if you already have the font loaded on your site (let's say you want to use the font 'Lato'). Go to Settings / Design / Custom CSS and add the code:
If you need to load the font first, you can use Google Fonts like this:
Go to Google Fonts, select the font, then go to Embed / Import
You will get a the @import code there, so now you will have:
