Change Font Size

Use the following code snippet to adjust the font size on Youreka forms.

Before

After

/* All font sizes on this template are set to be relative 
to the .slds-scope class font-size. If you want to change everything 
proportionally, change just the font-size in the .slds-scope class.
If you want to change font-sizes relative other ones, change 
the indvidual styles below. */
 
/* NOTE: The "em" unit of measure is porportional to the parent size. 
For Example, if .slds-scope has a font-size of 14px, a another class 
that has a size of 2em will have a font-size of 28px on the page 
(e.g. 2 x 14).*/
 
/********* Set proportional size here *********/
.slds-scope {
 font-size: 24px !important; 
}
 
 
 
/********* Set relative sizes below *********/
/* Template Name */ 
.slds-scope #formContent h1.formName {
 font-size: 2.285em;
}
 
 
/* Form Name */
.slds-scope #formContent h3.slds-text-heading_small {
 font-size: 1.286em;
}
 
 
/* Save Buttons Sizes */
.slds-scope .buttons-fixed button {
 line-height: 2.5em;
} 
 
 
/* Go To Page Select */
.slds-scope .buttons-fixed .slds-select.goToPage,
.slds-scope .buttons-fixed .pagination-container .slds-select_container,
.slds-scope .buttons-fixed .pagination-container .slds-select_container select {
 width: 7.15em;
 height: 2.44em;
}
 
 
/* Select Arrows */ 
.slds-scope #mainForm .slds-select_container:before,
.slds-scope #mainForm .slds-select_container:after {
 border-left-width: 0.214em;
 border-right-width: 0.214em;
}
.slds-scope #mainForm .slds-select_container:before {
 border-bottom-width: 0.357em;
 top: calc((2.429em / 2) - 0.429em);
}
.slds-scope #mainForm .slds-select_container:after {
 border-top-width: 0.357em;
 bottom: calc((2.429em / 2) - 0.429em);
}
 
 
/* Padding for top of form */
div.currentPageContainer {
 padding-top: 5em;
}
 
 
/* Icon Sizes */
.slds-scope svg.slds-button__icon {
 height: 1.143em;
 width: 1.143em;
}
 
 
/* Input Heights */
.slds-scope .slds-form-element__control input,
.slds-scope .form-section .control-group .controls select {
 height: 2.5em;
}
 
 
/* Attachment Upload Button Font Size */
.slds-scope span.slds-button {
 line-height: 2.43em;
}
 
 
/* Section Header Font Size */
.form-section.slds-card h2 {
 font-size: 1.28em;
}
 
 
/* Question Text vertical position */
.form-section.slds-card .control-label {
 padding-top: 0.35em;
}
 
 
/* Attachment Upload Button */ 
.slds-scope button.slds-button {
 line-height: 2.385em;
}
 
 
/* Checkbox/Radio Button Size */ 
.slds-scope .slds-form-element__control .slds-radio .slds-radio_faux,
.slds-scope .slds-form-element__control .slds-checkbox .slds-checkbox_faux {
 width: 1em;
 height: 1em;
}
/* Checkbox/Radio Button Option Label Text Size */ 
.slds-scope .slds-form-element__control .slds-radio .slds-form-element__label,
.slds-scope .slds-form-element__control .slds-checkbox .slds-form-element__label {
 font-size: 1em;
}
/* Checkbox & Radio Button check size */
.slds-scope .slds-form-element__control .slds-radio [type="radio"]:checked + .slds-radio_faux::after, 
.slds-scope .slds-form-element__control .slds-radio [type="radio"]:checked ~ .slds-radio_faux::after
.slds-scope .slds-form-element__control .slds-checkbox [type="checkbox"]:checked + .slds-checkbox_faux::after, 
.slds-scope .slds-form-element__control .slds-checkbox [type="checkbox"]:checked ~ .slds-checkbox_faux::after {
 border-bottom-width: 0.143em;
 border-left-width: 0.143em;
 height: 0.286em;
 width: 0.59em;
}
 
 
/* E-Signature Height */ 
.slds-scope .sig-answer-container.sig-empty {
 height: 4.286em;
}
 
 
/* Date Input Selector Icon */ 
.slds-scope .slds-form-element .input-glyphicon-calendar {
 padding-top: 0.5em;
}
 
 
/* Input Width */ 
.slds-scope .controls .ms-selectable, /* Multi-select Picklist Container */
.slds-scope .controls .ms-selectable ol, /* Multi-select Picklist */
.slds-scope #mainForm .slds-form-element.long-text-container, /* Long Text Container */
.slds-scope #mainForm .slds-form-element.OR-form-element_width, /* Long Text */
.slds-scope #mainForm .slds-form-element.OR-form-element_width .slds-form-element__control, /* General Input Container */
.slds-scope #mainForm .slds-form-element.OR-form-element_width .slds-form-element__control input, /* General Input */
.slds-scope .slds-form-element.OR-form-element_width .slds-form-element__control .slds-select_container, /* Select Container */
.slds-scope .slds-form-element.OR-form-element_width .slds-form-element__control .slds-select_container select, /* Select */
.slds-scope #mainForm .slds-form-element.OR-form-element_width .slds-form-element__control .slds-select_container select option { /* Select Options */
 width: 17.857em;
 max-width: 100%;
}
@media screen and (max-width: 680px) {
 .slds-scope #mainForm .form-section textarea.slds-textarea {
 min-width: 98%;
 }
}