Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to change form input font size


Question

Posted (edited)

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 

Edited by CoorlasArchitecture
Link to comment
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

5 answers to this question

Recommended Posts

  • 0
Posted (edited)
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!
 

Edited by TheSquareSpacer
Link to comment
  • 0
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.

Link to comment
  • 0

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?

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
10 hours ago, CoorlasArchitecture said:

.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;
   }
 }  
}

This code seems to have solved the issue. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...