How to change form input font size

Site URL: https://www.coorlasarch.com/contact

I found the CSS code to change the form input text size, but it does not work for the First and Last name input fields

/* Form Block */
.form-wrapper .field-list .field .field-element {
  font-size: 1.2rem;
}

Any idea how to include those name fields? I'm not extremely CSS savvy.

Thanks in advance,
Stephen 

30 minutes ago, CoorlasArchitecture said:

Site URL: https://www.coorlasarch.com/contact

I found the CSS code to change the form input text size, but it does not work for the First and Last name input fields

 

/* Form Block */
.form-wrapper .field-list .field .field-element {
  font-size: 1.2rem;
}

 

Any idea how to include those name fields? I'm not extremely CSS savvy.

Thanks in advance,
Stephen 

Hi Stephen, 

Please go to design>custom CSS and paste the following code
sqs-block-form .field-list .caption {
    color: #000;
    font-size: 1.2rem !important;
}
Please let me know how it goes, and ask for help if it does not work. Please mark the answer as correct if it works as it will help others in the community with same question. Thanks!
 

30 minutes ago, TheSquareSpacer said:

Hi Stephen, 

Please go to design>custom CSS and paste the following code
sqs-block-form .field-list .caption {
    color: #000;
    font-size: 1.2rem !important;
}
Please let me know how it goes, and ask for help if it does not work. Please mark the answer as correct if it works as it will help others in the community with same question. Thanks!
 

Hello - unfortunately this does not seem to change anything when entered in the CSS. I deleted my previous CSS and entered yours, and it did not work. I also tried to keep both, and that did not work for the First and/or Last name fields.

I found a longer CSS code with more modifiers such as font style and color,  and manipulated it to only change the font for all fields including the First and Last Name:

.form-wrapper .field-list {
 .field {
   .caption {
     /* Captions of fields (eg First Name, Last Name) */
     font-size: 1.2rem;
     .field-element {
       /* Text in the field boxes (First Name, Last Name) */
       font-size: 1.2rem;
     }
   }
   .field-element {
     /* Text in the field boxes (inc placeholder text) */
     font-size: 1.2rem;
   }
 }  
}

Not sure if this can be paired down further. When I eliminate the "Captions of fields" section it stops working on the First Name, Last Name fields. I'm not sure of that's because the name fields are hosted in that Captions of fields bracketing?

Can this CSS code be more efficient?

9 hours ago, CoorlasArchitecture said:

I found a longer CSS code with more modifiers such as font style and color,  and manipulated it to only change the font for all fields including the First and Last Name:

 

.form-wrapper .field-list {
 .field {
   .caption {
     /* Captions of fields (eg First Name, Last Name) */
     font-size: 1.2rem;
     .field-element {
       /* Text in the field boxes (First Name, Last Name) */
       font-size: 1.2rem;
     }
   }
   .field-element {
     /* Text in the field boxes (inc placeholder text) */
     font-size: 1.2rem;
   }
 }  
}

 

Not sure if this can be paired down further. When I eliminate the "Captions of fields" section it stops working on the First Name, Last Name fields. I'm not sure of that's because the name fields are hosted in that Captions of fields bracketing?

Can this CSS code be more efficient?

Did you solve or still need help?